Flash AS3-Tam Ekran Yapımı

Flash ve ActionScript kullanarak geliştirdiğimiz uygulamarı tam ekran olarak görüntülemek istediğimizde birçok sorun yaşarız ve uygulamamız tam ekran modunda istediğimiz gibi görüntülenmez.

Bu örneğimizde hem uygulamamızı tam ekran modunda görüntülemeyi hem de tam ekran modunda sahne üzerindeki nesneleri nasıl konumlandıracağımızı yani RESIZE metodunun kullanılmasını ele alacağız.

Yeni bir döküman açalım ve ilk olarak arkaplan olarak kullanacağımız bir görseli File > Import to Stage menüsünü kullanarak uygulamamıza aktaralım ve boyutunu sahnemize göre ayarlayalım.


 Aktardığımız imajı MovieClip olarak sembole dönüştürelim(sembole dönüştürken açılan pencerede Registration noktasını sol üst köşe olarak ayarlayalım) ve Instance Name kısmına arkaplan_mc yazalım. Components panelinde bulunan Button bileşeninden iki adet sahneye sürükleyelim.

 Instance Name kısımlarına tamEkran_mc ve normalEkran_mc yazalım.
Evet uygulamamızda kullanacağımız nesnelerimiz hazır artık kodlama kısmına geçerek uygulamamızı düzenleyebiliriz.

Uygulamada kullandığımız nesneler sadece butonlara tıklandığında değil, swf dosyasının boyutu değiştiğinde de belirlediğimiz yerlere yerleştirilecektir.

Herşey hazır olduğuna göre Actions panelini açarak aşağıdaki kodları yazabiliriz.

//Eklediğimiz componentlerin buton modlarını açıyoruz.
tamEkran_mc.buttonMode=true;
normalEkran_mc.buttonMode=true;
//butonların üzerinde bulunan yazıları düzenliyoruz.
tamEkran_mc.label="Tam Ekran";
normalEkran_mc.label = "Normal Ekran";
//sahnenin ölçekleme modunu NO_SCALE olarak dğeiştiriyoruz.
//bu sayede sahnedeki nesnelerin boyutları aynı kalacaktır
//uygulamamızın boyutu büyüse de küçülse de değişmeyecektir.
stage.scaleMode=StageScaleMode.NO_SCALE;
//sahnenin referans noktasını sol üst köşe olarak ayarlıuyoruz
stage.align=StageAlign.TOP_LEFT;

//uygulamamız çalıştırıldığında nesnelerin duracaklerı yerleri
//belirlemek için bir fonksiyon oluşturuyoruz.
function sahneyeYerlestir() {
    //arkaplan resmi olarak kullandığımız nesnenin boyutlarını sahneye göre ayarlıyoruz.
    arkaplan_mc.width=stage.stageWidth;
    arkaplan_mc.height=stage.stageHeight;

    //nesnenin x ve y konumlarını belirtiyoruz.
    arkaplan_mc.x =arkaplan_mc.y =0;

    //tamEkran butonunun sahne üzerinde duracağı konumu belirliyoruz.
    tamEkran_mc.x=stage.stageWidth-250;
    tamEkran_mc.y=stage.stageHeight-35;

    //normalEkran butonunun sahne üzerinde duracağı konumu belirliyoruz.
    normalEkran_mc.x=stage.stageWidth-125;
    normalEkran_mc.y=stage.stageHeight-35;
}

//fonksiyonumuzu çağırıyoruz.
sahneyeYerlestir();

//Uygulamanın boyutu değiştirildiğinde sahneyeYerlestir isimli fonksiyonu
//tekrar çağırıyoruz.
stage.addEventListener(Event.RESIZE, yenidenDuzenle);
function yenidenDuzenle(e:Event) {
    sahneyeYerlestir();
}

//tamEkran_mc isimli nesneye olay dinleyicimizi atıyoruz
//butona basıldığında uygulamamız tam ekran modunda görüntülenecektir.
tamEkran_mc.addEventListener(MouseEvent.CLICK, tamEkranEkran);
function tamEkranEkran(e:MouseEvent) {
    stage.displayState=StageDisplayState.FULL_SCREEN;

}

//normalEkran_mc isimli nesneye olay dinleyicimizi atıyoruz
//butona basıldığında uygulamamız normal boyutunda görüntülenecektir.
normalEkran_mc.addEventListener(MouseEvent.CLICK, normalEkran);
function normalEkran(e:MouseEvent) {
    stage.displayState=StageDisplayState.NORMAL;
}

Uygulamızın HTML sayfalarında da tarayıcı boyutlarında görüntülenmesini istiyorsak Publish Settings ayarlarında HTML sekmesini aşağıdaki gibi ayarlamamız gerekmektedir.