‘swfobject’ etiketi için sonuçlar

HTML Sayfalarına %100 genişlikte ve %100 yükseklikte flash dosyaları eklemek

Mart 29th, 2010 • 7 yorum CSS, XHTML
Etiketler: , , , , ,

Site üzerinden gelen bazı sorular belli aralıklarla farklı kişilerden gelince bu konuda bir yazı yazma ihtiyacı duyuyorum. Bu konuda olduğu gibi. Daha öncede benzer sorular ile karşılaştım. Bende bir kaç projemde bu konuyu göz atmıştım.

İki yöntem var aslında bunun için.

Birinci Yöntem

body {
    height: 100%;
    width: 100%;
    margin: 0;
}

şeklinde bir kod. Ancak bu kod ne yazık ki Firefox ve Opera’da çalışmıyor. Yada çalışması için html sayfamızdan DOCTYPE’ı silmemiz gerekiyor. Bence bu pek mantıklı bir kullanım değil, o nedenle ben ikinci yöntemi öneriyorum.

İkinci Yöntem

swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf");

Genişlik ve yüksekliğini 100% veriyoruz ve css kodumuzu yazıyoruz.

/* hide from ie on mac \*/
html {
    height: 100%;
    overflow: hidden;
}

#myContent {
    height: 100%;
}
/* end hide */

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #090;
}

Örneği görmek için tıklayınız

CSS kodumuz biraz daha fazla olan bu yöntem DOCTYPE kullanımı durumunda da çalıştığı için bence en kullanışlı yöntem. Geçen hafta anlattığım flashobject ile kodumuzu sayfaya ekledik.

CSS kodu biraz incelersek;

Kodun ilk iki tanımını ie5 Mac kullanıcılarından gizlemek için.

Htlm’e yüzde yüz yükseklik tanımı yapıyoruz ve flash dosyamız sayfanın tamamını kaplayacağı için sayfa kenarındaki kaydırma çubuğuna gerek kalmayacaktır, ie de kaydırma çubuğunu kaldırmak için overflow:hidden kodunu yazıyoruz.

Daha sonrada flash’ı eklediğimiz katman yüksekliğinide yüzde yüz yaparak elemanın tam sayfayı kaplamasını sağlıyoruz.

Son olarakta body elementinin yüksekliğini yüzde yüz yapıp margin ve padding değerlerini sıfırlıyoruz ve görünmese de işi garantiye almak için bir backgroun-color tanımı yapıyoruz. Bu kadar.

Kaynaklar

Flash dosyalarını(swf) HTML’e eklemek

Mart 25th, 2010 • 18 yorum Javascript, XHTML
Etiketler: , , ,

Flash dosyalarını html sayfalarımıza eklemek baştan beri tam oturmamış bir konudur. Farklı tarayıcılar için farklı kod blokları yazılması, flash olmaması durumu için hazırlanan resimler veya yazılar vs. Ancak bu sorunlar yetmiyormuş gibi birde İnternet Explorer’ın ActiveX güncellemesi sonrası yeni sorunlar çıktı.

O zamanı(Mart-Nisan 2006) hatırlıyorum Turkline’da çalışıyordum ve Microsoft’un Eolas ile lisans sorunları nedeni ile bir gün için tüm flash içeren siteleri kontrol etmemiz gerekmişti. Çözümünü bulup tüm dosyaları değiştirmemiz gerekmişti. Hey gidi günler.

Bu sorundan önce genelde Dreamweaver ki o zamanlar Macromedia Dreamweaver idi, Dreamweaver ile açıp swf ekle diyorduk ve o kendi kodunu ekliyordu.

Tabi internet explorer sorunu sonrası bu işi javascript ile yapmaya başladık. Bir çok yöntem çıktı bu işi javascript ile yapan.

Eskileri bırakıp şimdiki zamana gelelim. Ben html sayfalarına flash(swf) dosyaları eklemek için SwfObject kullanıyorum. Bir çok alternatifine göre avantajlı.

Avantajlarını sıralarsak;

  • Diğer flash kodlarına göre daha optimize ve esnek
  • Herkes için tek çözüm sunuyor. HTML, javascript ve flashçılar için
  • Web standartlarına uygun kod üretiyor ve sorun çıktığında alternatif çözüm sunuyor.
  • Çok basit bir javascript kodu var
  • Kullanımı kolay
  • Boyutu 10kb’dan daha az.(Gzip hali 3.9kb)

SwfObject’in 2.2 sürümü çıktı son olarak. İşi iyice standart haline getirmişler ve scriptsiz çalışan bir metot daha eklemişler. Statik ve Dinamik kod diye iki kısma ayırmışlar kodu.

Kaynak kodları Google Code‘dan indireceğiz. İndirdiğimiz dosyada expressInstall.swf, swfobject.js, index.html, index_dynamic.html, test.swf dosyaları yer alır. Ayrııca src klasörüde yer alır.

Statik Kod ile Flash Dosyalarını Eklemek

SWFObject’in önceki sürümlerinde olmayan bu metot yeni sürüm ile birlikte gelmiştir. Bu kod eski(ie eolas lisans sorunu öncesi) statik metoda benzer bir yapıya sahiptir. Bu kod sayesinde javascript desteği olmaya durumlar için kod üretmiş oluyoruz.

Bu metodun avantajı object ile eklenen kodların daha performanslı sonuç verecektir. Dezavantajı ise eski tarayıcısı olan kullanıcıların gri kenarlık sorunu ve tıklama sorunu yaşamalarıdır. Microsoft daha sonra bu hatayı düzeltti ise de hala bu güncellemeyi yapmayan kullanıcılar vardır.

Indirdigimiz dosya içerisinden çikan index.html sayfasi statik bir flash eklemeye örnektir. Kodlarini incelersek

<!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="en" xml:lang="en">
<head>
<title>SWFObject 2 static publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<param name="movie" value="test.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
<!--<![endif]-->
<div>
 <h1>Alternatif içerik</h1>
 <p>Kullanıcının bilgisayarında flash yüklü değilse burayı gösterecek<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

Kodu iki kısıma ayıralım. İlk head içerisindeki javascript kısmı ve body içerisindeki html kısmı

head içerisindeki javascript kısmı

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>

registerObject fonksiyonuna html içindeki elemanın id’sini(myId), flash sürümünü ve flash olmayanlar için yüklemeye yönlendiren dosyanın adı(expressInstall.swf)

Kodun ikinci kismina gelirsek body içerisine yazılan html kodumuz var

Bu kodumuz iç içe object elemanlarından oluşur. Ayrıca ie sürümlerinin yorumlanması için ie yorum kodları yer alır.

  • id(id="myId") swfobject ile yakalamamız için gereklidir.
  • width – swf dosyasının genişlik değeri
  • height – swf dosyasının yükseklik değeri

Diğer atamalar sabittir. Ayrıca ek özellikler eklemek istediğimizde(örn: flashvars, transparent vd.) <param> etiketi ile bunları eklemeliyiz. Ayrıntılı bilgi için tıklayınız

Dinamik Kod ile Flash Dosyaları Eklemek

Dinamik yöntem ile kod ekleme yöntemi swfobject’in eski sürümleri ile aynıdır. Bu yöntem daha basit uygulanabilirliği vardır. Ayrica dinamik olarak eklendiği için javacscript ve ajax ile müdahale imkanı daha kolaydır.

Bu yöntem kullanıldığında internet explorer’daki tıklama ve gri kenar sorunu olmayacaktır.

İndirdiğimiz dosya içerisindeki index_dynamic.html bu kodlama örneğini içerir.

Bu kodumuzda head içindeki ve body içindeki kısımları ile ikiye ayrılır.

body içerisindeki kısmı

<div id="myContent">
 <h1>Alternatif içerik</h1>
 <p>Kullanıcının bilgisayarında flash yüklü değilse burayı gösterecek <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

Dinamik kodlama ile flash(swf) dosyalarının eklenme mantığı şöyledir; bir eleman oluşturulur ve bu elemana dinamik olarak özellikleri atanır ve sayfa içerisindeki id tanımlı alan ile bu içerik yer değiştirilir. Bu şöyle bir avantaj sağlıyor bize eğer flash yok ise bu eleman içerisine yazdığımız içeriği kullanıcı görüyor, flash var ise de flash görünüyor.

head içindeki kısımları

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
</script>

swfobject.js dosyasını ekliyoruz. Sonrada html içerisine ekleyeceğimiz swf dosyasının bilgilerini giriyoruz. Sırası ile incelersek

  • test.swf – Eklenecek swf dosyasının yolu ve adı, burada aynı klasörde olduğu için sadece adı yazılmıştır.
  • "myContent" – body içerisindeki içine eklenecek elemanın id’si
  • "300" – swf dosyasının genişliği
  • "120" – swf dosyasının yüksekliği
  • "9.0.0"- flash sürümü
  • expressInstall.swf- flash olmayanlar için yüklemeye yönlendiren dosyanın adı

Dinamik yöntemin avantajlarını sayarken kolay kullanımı olduğunu söylemiştik. Mesela yeni parametre eklerken kodumuzu söyle değiştirmemiz yeterli olacaktır

var flashvars = {};
flashvars.xmlPath = "xml/data.xml";
var params = {};
params.menu = "false";
params.wmode = "opaque";
var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";
 swfobject.embedSWF("test.swf", "myAlternativeContent", "300", "120", "9.0.0", false, flashvars, params, attributes);

İlk başta değişkenleri tanımlayıp sonra embed kodu içine ekliyoruz. Bir başka şekli ile 

<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {xmlPath:"xml/data.xml"}, {menu:"false", wmode:"opaque"}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>

şeklinde de yazabiliyoruz. Parametre olarak ben genelde ya flashvars ile xml yolunu yazıyorum, yada wmode özelliğini yazıyorum. Diğerlerini pek kullanmıyorum. Bana eski sürümdeki parametre ekleme şekli daha kolay geliyordu açıkçası.

wmode özelliği

Yeri gelmişken wmode özelliğinede değinelim. window , opaque ve transparent özelliklerini alıyor. Ben genelde bu özelliği diğer elemanlar flash altında kalınca kullanıyorum. window hiç kullanmadım, eskiden transparent kullanıyordum ancak transparent kullanınca flash çok yavaşlatıyor sayfayı bu nedenle opaque kullanıyorum. Tabi eğer flash zemini saydam olmayacak ise ki genelde olmuyor.

Sonuç

SwfObject 2.2′in yanında google code içerisinde "SWFObject 2 HTML and JavaScript generator v1.2" yukarıdaki kodu üretmek için bir sayfa hazırlanmış işi daha kolay hale getiren bir araç.

Genel hatları ile bir web sayfasına swf dosyasını bu yöntem ile ekleyebiliriz. Bunun dışında da javascript ile yapılmış bir çok yöntem var, jquery eklentisi var. Ancak ben swfobject’i kullanıyorum. Sizlerede kullanmanızı öneriyorum. Kendinize iyi bakın. Görüşmek dileğiyle. Hoşçakalın.

Kaynaklar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.