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.
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.
Gerekli ayarları yaptıktan sonra uygulamanız HTML sayfalarında tam ekran modunda görüntülenecek ve tarayıcının boyutlarına göre ölçeklenecektir.
teşekkürler
#1 by Serhat SEZER on 21 Mart 2010 - 17:39
Gerçekten çok açıklayıcı ve akılda kalıcı anlatım olmuş. Teşekkürler devamını bekliyoruz.
#2 by serkomut on 23 Ocak 2011 - 17:49
kardeş aklına sağlık, Serhat arkadaşında dediği gibi gerçekten çok açık… paylaşımın için sağol.
#3 by berkay42 on 23 Şubat 2011 - 10:43
ellerine sağlık güzel çalışma olmuş yalnız bri şer sorsam sayın hacam ben butonla değilde direk olarak tarayıcıda açıldığında kendisi otomatik ayarlasa ekranı tam ekran olarak açılsa neslelerle beraber yardımcı olurmusunuz saygılar,
#4 by Erol Demirer on 23 Şubat 2011 - 11:11
stage.displayState=StageDisplayState.FULL_SCREEN;
satırını
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
satırlarının alrına eklersen istediğin gibi açılır.
#5 by berkay42 on 23 Şubat 2011 - 14:16
sayın erol bey çok tşk ederim ama ben daha yeniyim fazla bri şey anlamadım detaylı anlatırsan sevinirim kodlarla beraber hocam şimdi arka sahne var bu sahneye koyduğumuz resim ve resim üzerindeki butonlar olsun başka resimler olsun direk olarak inernet sayfasında açılınca sabti oalrak açılmasını istiyorum yani tarayıcının boyutuna göre otomatik olsun ama sahne üzerindeki eklenen resimler ve butonlar gb ekler sabti yerinde kalsın tarayıcıyı küçültüp büyütünce taraycı boyutuna göre ayarlansın tşk ederim yazmışsınız ama ben anlamadım çok özür dilerim saygıalrımla,
#6 by zozo on 13 Ağustos 2011 - 19:03
Uzun bir süredir As3 için bu konuyu düzgün anlatan ve çalışan bir örnek paylaşan yabancı/yerli kaynak araştırıyorum. Sonunda buldum. Gerçekten çok güzel bir şekilde anlatmışsınız. Sizi tebrik ediyorum.
#7 by tcay on 02 Ekim 2011 - 10:14
Hocam çok teşekkürler aradığım bir bilgiydi.Birde aynısının sol üst köşeye, sağ üst köşeye vs. konumlandırmasını yapabilirseniz çok iyi olur…
Teşekkürler
#8 by dilozem on 18 Ekim 2011 - 19:55
Web sayfamı publishsettings den fullscreen özelliklerini ayarlıyorum, herşey tmm fakat sayfanın etrafında beyaz bir çerçeve oluşturuyor, neden olabilir? Teşekkürler
#9 by Erol Demirer on 18 Ekim 2011 - 19:58
HTML’deki padding ve margin ayarlarından olabilir mi?
#10 by dilozem on 18 Ekim 2011 - 21:03
Evet, kontrol ettim, margin ayarlarıymış.
flashta htmli bu şekilde kaydetmesi ilginç.
çok ama çok teşekkürler
#11 by Erol Demirer on 18 Ekim 2011 - 21:07
CS4 ve önceki sürümlerde bu şekilde kaydediyor(yanlış hatırlamıyorsam). Yeni sürümlerde bu boşluklar yok.
#12 by erdokan on 25 Ekim 2011 - 19:07
güzel bir yazı teşekkürler