Aklınızda bir fikir var. Bir internet sayfası yapmak istiyorsunuz ama hangi çözünürlükte bakılırsa bakılsın tam hayal ettiğiniz gibi gözüksün istiyorsunuz… O zaman doğru satırları okuyorsunuz.

Daha önceden tamamladığımız bir proje olan Yapı Kredi Private Banking projesinden örnekler vererek anlatmak istiyorum konuyu. Bitmiş halini görmek isteyenler http://www.ykprivate.com.tr adresini ziyaret edebilirler.

Öncelikle tasarımdaki en önemli unsur arkaplan resmi site hangi çözünürlükte veya tarayıcıda izlenirse izlensin tarayıcının alanının tamamını kullanmalıydı.
Siteninse gene hangi çözünürlükte veya tarayıcıda izlenirse izlensin aynı görünmesini istiyorduk.
Bu sebeple iki tane flash hazırlayıp bir tanesini arka plana yerleştirmeyi düşündük.

Arkaplanda sürekli değişen resimlerin olduğu flash çalışması

Site içeriğinin bulunduğu flash çalışması

Bu ikisinin nasıl üst üste kusursuz oturduğunu ise pek kıymetli çalışma arkadaşım, arayüzcülerin kraliçesi Gözde Hanım sizlerle yazısında paylaşacaktır;)

Biz arkaplan flash’ında neler olup bittiğine bir bakalım isterseniz.
Flashımızın içerisinde bir web servis aracılığı ile arka taraftaki CMS yazılımımızdan gelen arkaplan resimleri alınıyor ve gösteriliyor.
Burada ki önemli nokta flash’a verdiğimiz bir kaç stage komutu ile bunun bütün sahneyi kaplamasını sağlamak.

ActionScript2

Stage.align = "T";
Stage.scaleMode = "exactFit";

ActionScript3

stage.align = StageAlign.TOP;
stage.scaleMode = StageScaleMode.EXACT_FIT;

Flash’ı sayfaya çağırdığımız yerde flash’ın tüm sayfayı kaplaması için enini ve boyunu %100 olarak belirtmeyi unutmuyoruz.

Javascript

...
'width', '100%',
'height', '100%',
...

Gelelim sitenin kendisine. Sitemizin hep aynı görünmesini istiyoruz demiştik. O zaman yapmamız gereken ise…

ActionScript2

Stage.align = "TL";
Stage.scaleMode = "noScale";

ActionScript3

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

komutlarını kullanmak. Bu sayede site html’de %100 de versek esnemeyecektir. Peki ama sitemiz sayfaya ortalı, hangi çözünürlükte ya da browser’da açarsak açalım böyle kalmasını nasıl sağlayacağız derseniz yapmamız gereken stageResize durumu için bir fonksiyon yazmak olacak.

ActionScript2

var stageListener:Object = new Object();
stageListener.onResize = function() {
...
};
Stage.addListener(stageListener);

ActionScript3

stage.addEventListener(Event.RESIZE, stageResizeHandler);
function stageResizeHandler(event:Event):void {
...
}

Bu sayede flash player kendisi her resize olduğunda bu fonksiyonu tetikleyecek ve sahnedeki nesneleriniz hep sizin istediğiniz yerde kalmış olacaklar.

Umarım aklınızdakileri ortaya koymak için önünüzdeki engellerden birini kaldırmakta faydalı olmuşumdur.
Bir sonra ki yazımda görüşmek dileğiyle.

Makalenin kaynak kodları

Yazar Hakkında:  RIA Developer ;) Kod adı: mr_sandman_980x600.fla