Türkçescript

Flash Actionscript 3.0 ile objeleri hizalamak (Alignment)

29 Eylül 2009,

[adrotate group="2" banner="1"]

flash_cs3Bu sefer, bir önceki flash dersten farklı olarak, objeleri hizalamada, Actionscript 3.0 kullanalım. Dersin bitmiş halini buradan görebilirsiniz.

Bir önceki “Flash Actionscript 2.0 ile objeleri hizalamak” başlıklı dersteki objelerin çizim ve yerleştirme işlemlerini, burada tekrar anlatmıyorum. Yine 550′ye 300 px lik sahnede çalışacağım.

Evet önceki aşamaları yaptığınızı varsayarak, bu sefer actionscript katmanıma aşağıdaki kodu ekliyorum.

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.NO_SCALE;

this.stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler(event:Event):void {

alignment();

}

alignment();

function alignment() {

center_mc.x = stage.stageWidth / 2 - center_mc.width / 2;
center_mc.y = stage.stageHeight / 2 - center_mc.height / 2;
righttop_mc.x = (stage.stageWidth - righttop_mc.width) - 5;
leftbottom_mc.y = (stage.stageHeight - leftbottom_mc.height) - 5;
rightbottom_mc.x = (stage.stageWidth - rightbottom_mc.width) - 5;
rightbottom_mc.y = (stage.stageHeight - rightbottom_mc.height) - 5;

}

Yine başta, sahne hizlamamı TOP_LEFT (üst sol) olarak belirledim. Sahnemin scaleMode öğesinin değerini NO_SCALE olarak belirledim. Yani sahnemin boyut sınırlamasını kaldırdım.

Sahneme bir EventListener (olay dinleyici) ekliyorum. Sahne boyutlarında bir değişim olduğunda, resizeHandler metodunu kullanarak  alignment() fonksiyonunu çalıştırıyorum.

alignment() fonksiyonunun içerisinde ise, sahne özelliklerini kullanarak objelerimin yerlerini belirledim.

Not : Burada as2 den farklı olarak, as3 de bazı yazım değişiklikleri var. Örnek olarak as2 de kullandığımız _width/_height yerine as3 de kullandığımız width/height farklılığını verebiliriz.  As3′te çoğu yerde alt çizgi olayı kalkmıştır. Ayrıca  olay türünü belirtmemiz gerekiyor ve bunu Event sınıfı sabitleriyle yapıyoruz (RESIZE, CLICK vb..). Siz iki ders arasında göz gezdirerek nelerin farklı olduğunu görebilirsiniz. Ayrıca sitedeki diğer as3 derslerine bakmanızda yarar var.

Kaynak dosyayı buradan indirebilirsiniz.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5,00 out of 5)
Loading ... Loading ...
:, , , ,
8 yorum var:
  1. baris
    Haziran 24th, 2011 on 14:15

    öncelikle bu konuyu yazan yazara çok teşekkür ederim, as3 obje sabitleme konusu benim için çok büyük bir mevzuydu ve çözmeme yardımcı oldu bu yazı.

    herşeyi halletikten sonra şuan başka bir problemle karşı karşıya kaldım. problemim şu; MovieCliplerimi burdaki kodlardan faydalanarak sayfanın istediğim yerlerine sabitledim, fakat sayfa ilk açıldığında herşey saçma sapan yerlerde duruyor, sayfa genişliğini ayarladığım anda düzeliyor (pencereyi sağ alt koşesinden tutup birazcık büyütüp yada küçültüğümde)…. Problem bu swf ilk açıldığnda da herşeyin kodlarda ayarladığım gibi yerli yerinde olmasını istiyorum.

    sanki kodlar swf penceresinin kosesinden tutup çekiştirene kadar çalışmıyor gibi.

    bu konuda yardımcı olursanız çok ama çok memnun olurum.

  2. admin
    Haziran 25th, 2011 on 02:32

    Vakit bulsam daha çok konu yazacaktım ama vakit bulamıyorum, eskiden yazdığım yazılar bunlar.. yararlı olduğuna sevindim.:)
    Konuya gelecek olursak, senin söylediğin durum, fonksiyonu ilk olarak çalıştırmazsan meydana gelir. Farkettiysen yukarıda; dinleyici sahneyi dinliyor yani sahnede bir değişim olduğunda (köşesinden çekip büyütmek gibi)çalışıyor. Ama bunun dışında arada alignment(); fonksiyonunu dinleyiciye bağlamadan da çalıştırıyorum. Bu ise ilk açıldığında çalışması için..
    Eğer onu da yaptım ama çalışmıyor dersen; ben klplerimi oluştururken referans noktası olarak sol üst köşeyi seçmişim, buna da dikkat et.. benim objelerim küçük.. referans noktası değişikliğinde fazla fark yaratmayabilir ama sen büyük objeler kullandıysan (yatayda geniş dikeyde geniş) o durumda saçma sapan yerlerde çıkma olayı oluşabilir..
    Bu şekilde de çözemezsen yolla dosyanı bir bakalım.. Kolay gelsin..

  3. baris
    Haziran 26th, 2011 on 13:15

    bu dediğinizi ” fonksiyonu ilk olarak çalıştırmazsan meydana gelir ” nasıl yapabilirim bu konuyu anlatabilirmisiniz. Şuan bu benim için çok önemli hazırladığım web sayfasını teslim etmem gerekiyor ama sırf şu yüzden teslim edemiyorum.

    bu konuda örnekli basit ders anlatımı yapabilirseniz çok makbule geçer

    >hazırladığım flashta kulandığım kodları copy paste yapıyorum.

    stage.align = StageAlign.TOP_LEFT;

    stage.scaleMode = StageScaleMode.NO_SCALE;

    this.stage.addEventListener(Event.RESIZE, resizeHandler);

    //Ekran boyutu her değiştiğinde otomatik düzenleme

    //yapan fonksiyonumuzu yazıyoruz

    function duzen(e:Event):void {

    sol.y = (stage.stageHeight – sol.height) – 45;
    sol.x = (stage.stageWidth / 2 – sol.width / 2) – 565;

    alt.y = (stage.stageHeight – alt.height) – 5;
    alt.x = stage.stageWidth / 2 – alt.width / 2;

    orta.y = (stage.stageHeight – orta.height) – 102;
    orta.x = (stage.stageWidth / 2 – orta.width / 2) – 165;

    //böylelikle menuler nesnemiz daima ekranımızın en üstünde olacaktır.
    }

    //şimdi ise bu fonksiyonu çalışmamız ilk açıldığında başlatıyoruz.
    duzen(null);

    //şimdi ise her ekran değişiminde otomatik yeniden boyutlandırıyoruz

    //sahneye (stage) fonksiyonumuzu dinletiyoruz..
    stage.addEventListener(Event.RESIZE, duzen);

    function resizeHandler(event:Event):void {
    setBackground();
    }

    setBackground();

    function setBackground(){
    var middleX = stage.stageWidth/2;
    var middleY = stage.stageHeight/2;

    bg_mc.x = middleX;
    bg_mc.y = middleY;

    bg_mc.width = stage.stageWidth;
    bg_mc.height = stage.stageHeight;

    if(bg_mc.scaleX > bg_mc.scaleY) {
    bg_mc.scaleY = bg_mc.scaleX;
    }else{
    bg_mc.scaleX = bg_mc.scaleY;
    }
    }

  4. admin
    Haziran 27th, 2011 on 13:25

    Dostum orası biraz karışmış.. Fullscreen olayı ile hizalamayı burada birleştirdim. bir incele bakalım.. Bu kodu nasıl çalıştırdın onu da anlamadım ya neyse bir sorun olursa yazarsın buraya, kolay gelsin..

  5. Ahmet
    Ağustos 18th, 2011 on 08:03

    İyigünler. ben As3′ e yeni başlamış sayılırım. As3 ile fotoğrafçı için portfolyo sitesi yapmaya çalışıyorum ancak beceremedim. Dinamik movie klip içinde resimi nasıl yeniden pozisyonlandırabiliriz

  6. admin
    Ağustos 20th, 2011 on 05:21

    Dinamik movie clibi yaratırken bunu yapabilirsin normalinden hiç bir farkı yok, eğer birden fazla yaratıp sıralıyorsan kullandığın değişkeni de kullanman gerekir.. Buradaki konuda clipleri çoğalttıktan sonra aşağıya doğru hizalarken dediğini yapmıştım.. kolay gelsin..

  7. Seçkin
    Ağustos 22nd, 2011 on 02:43

    Arkadaşlar merhaba Bu konu benim de çok işime yaradı.
    yazan arkadaşımıza teşekkür ediyorum. http://owlconcept.com/ sitesine benzer bir site yapıyorum ekran çözünürlüklerindeki bozulmalara karşı ızgara çoğaltma(grid pattern) kullanmak istiyorum.bu işlemi aşağıdaki kod yapıyor ama sadece backgraund a uygulamıyor flash ın tamamına uyguluyor.bunun çözümü varmıdır yardımcı olursanız sevinirim
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;

    this.stage.addEventListener(Event.RESIZE, resizeHandler);

    function resizeHandler(event:Event):void {
    setBackground();
    }

    setBackground();

    function setBackground(){
    var middleX = stage.stageWidth/2;
    var middleY = stage.stageHeight/2;

    zemin_mc.x = middleX;
    zemin_mc.y = middleY;

    zemin_mc.width = stage.stageWidth;
    zemin_mc.height = stage.stageHeight;

    if(zemin_mc.scaleX > zemin_mc.scaleY) {
    zemin_mc.scaleY = zemin_mc.scaleX;
    }else{
    zemin_mc.scaleX = zemin_mc.scaleY;
    }

    }

    stage.addEventListener(Event.RESIZE, tileBG);

    var tile:Sprite;

    function tileBG(event:Event=null):void {

    //create a reference to the old tile container
    var oldTile:Sprite = tile;

    //create a new tile container
    tile = new Sprite();

    //fill the container
    tile.graphics.beginBitmapFill(new Pattern(0, 0));
    tile.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    tile.graphics.endFill();

    //add the tile container to the display list
    addChild(tile);

    //get rid of the old container
    if (oldTile != null && oldTile != tile) {
    removeChild(oldTile);
    }
    tileBG();
    }
    tile adında bir png image var kütüphanede classname i Pattern kolay gelsin herkese..

  8. admin
    Ağustos 22nd, 2011 on 03:10

    bak bu linkte aynı sorunu yaşayan birine bir çözüm sunmuşlar.. Sıkıntı olursa tekrar yazarsın buraya.. Örnek gösterdiğin site de güzelmiş.. javascriptle yapılmış.. Teşekkürler..

Yanıtla

İsim

Mail

Websitesi    

Güvenlik Kodunun Resmi
*

Bağlantılar!

Kendi projelerimiz ve arkadaşlarımızın projeleri...

Arşiv

Tüm girişler, tarih sırası ile...