ActionScript ve 3D Menu Yapımı



Önceki makalemde birim çemberdeki sin ve cos ile dairesel haraketler yapmayı öğrenmiştik.Şimdi ise bunu kullanarak ve birazcık daha geliştirerek persfektif 3D menu yapıcagız. Öncelikle yeni bir Flash dosyası açın ve içine bir top çizin.Bu topu seçin ve movieclip haline getirin.
Bu movieclip'in instance name = top_mc olsun.
Frame kodlarımızda karışıklılıgı önlemek için prototype kullanıcagız.
Örnek kod:

MovieClip.prototype.saydamlik = function(a:Number) {
this._alpha=a;
};

Bu fonksiyonumuz sadece movieclip'lere uygulanılır ve _global'dir.
Örnek kullanım:

top_mc.saydamlik(10);
Gördügünüz gibi Movieclip'ten sonra "." işareti konur ve fonksiyon öyle yazılır.Bu bize çok kolaylık sağlar...
Frame kodlarımızı silelim ve şunları yazalım:

Kod:
MovieClip.prototype.dondur = function(aci:Number) {
this.i = aci;
this.onEnterFrame = function() {
this.i += (_root._xmouse-(Stage.width/2))/1500;
this._yscale = this._xscale=this._y/((Stage.height/2)+y_oran)*100;
this._x = (Math.sin(this.i)*x_oran)+Stage.width/2;
this._y = (Math.cos(this.i)*y_oran)+Stage.height/2;
updateAfterEvent();
this.swapDepths(this._y);
};
};
Evet şimdi bu kodumuza bir bakalım.Bu kodumuzda; movieclip içindeki i degerini fonksiyon parametresi olan aci degerine eşitliyoruz.Ardından onEnterFrame ile döngüye sokup kullanacagımız movieclip içindeki i degerini mousun hareketine göre arttırıp azaltıyoruz.
this._yscale = this._xscale=this._y/((Stage.height/2)+y_oran)*100;
Bu satırda movieclip'imizin genişligini ve yüksekligini eşitliyoruz.Nede olsa bu movieclip bir top oldugundan öyle olması gerekiyor (*1)
Movieclip'in x ve y kordinatlarını sin ve cos fonksiyonlarını kullanarak belirliyoruz ki zaten bunu daha önceki makalemde açıklamıştım.

Ardından updateAfterEvent(); kodunu kullanarak sahneyi yeniliyoruz.Bu bize daha akışkan bir görüntü sağlıyor...
Son olarak movieclipin digerlerinin önünde ya da arkasında oldugunu movieclip'in y kordinatına bağlı olarak değiştiriyoruz.(*2)
Tüm bu açıklamalardan sonra kodumuza şu satırları ekliyelim:

Kod:
top_mc._visible = false;
toplam_top = 15;
x_oran=100;
y_oran=50;
for (i=0; i<=toplam_top; i++) {
aci = (360/toplam_top)/(180/Math.PI)*i;
var yeni_top:MovieClip = top_mc.duplicateMovieClip("top"+i, i);
yeni_top._x = (Math.sin(aci)*x_oran)+Stage.width/2;
yeni_top._y = (Math.cos(aci)*y_oran)+Stage.height/2;
yeni_top.dondur(aci);
}

Burada ilk başta top_mc'imizi görünmez yapıyoruz; çünkü ona komut vermiyeceğiz.
For döngüsü ile toplam_top degeri kadar i sayısını arttırıyoruz.
Ardından aci degerini Flash'ın kullandıgı radyan biriminden derece birimine çeviriyoruz.Bu bize çalışmanın başlangıcındaki tüm topların 3D olarak sıralanmasını sağlayacak.
Yeni bir top yaratıp bunun x ve y kordinatlarını daha önce buldugumuz aci degerini sin ve cos fonksiyonlarını içine yazarak buluyoruz.

Bu aci degeri movieclip'e uygulayacagımız dondur fonksiyonunun parametresine yazıyoruz ve bu fonksiyonu çalıştırıyoruz.

Tüm frame kodumuz:

Kod:
MovieClip.prototype.dondur = function(aci:Number) {
this.i = aci;
this.onEnterFrame = function() {
this.i += (_root._xmouse-(Stage.width/2))/1500;
this._yscale = this._xscale=this._y/((Stage.height/2)+y_oran)*100;
this._x = (Math.sin(this.i)*x_oran)+Stage.width/2;
this._y = (Math.cos(this.i)*y_oran)+Stage.height/2;
updateAfterEvent();
this.swapDepths(this._y);
};
};
top_mc._visible = false;
toplam_top = 15;
x_oran=100;
y_oran=50;
for (i=0; i<=toplam_top; i++) {
aci = (360/toplam_top)/(180/Math.PI)*i;
var yeni_top:MovieClip = top_mc.duplicateMovieClip("top"+i, i);
yeni_top._x = (Math.sin(aci)*x_oran)+Stage.width/2;
yeni_top._y = (Math.cos(aci)*y_oran)+Stage.height/2;
yeni_top.dondur(aci);
}
Evet çalıştırdınızda mous hareketine göre 3D bir görünüm sergileyecektir.
(*) Satırları tekrar açıklıyacağım.Çünkü bu satırlar tüm çalışma kodları yazılmadan açıklanamaz...
Çalışmaya baktıgınızda movieclip'lerin sanki bri derinligi var.Evet bu derinlik aslında movieclip'in sadece y kordinatının değişmesi ve bu değişikligi ile büyümesinden ibaret.Peki biz nasıl derinligi sağlıyoruz?
(*1)this._y/((Stage.height/2)+y_oran)*100;
Bu satırımızda movieclip'imizin y kordinatında çıkabilecegi en yüksek nokta Çalışma sahnesinin ortasından y_oran kadar fazlasıdır.İşte bu noktada işin içine matematikteki doğru orantı giriyor.
Örnek olarak:
bizim elimizde 30 sayısı ile 600 sayısı olsun.Bunu %100 bakımıdan yazmamız için: 30/600*100 satırını kullanırız.
this._y/((Stage.height/2)+y_oran)*100;

Bu satırda benzetmek yapmak istersek this._y = 30 ve ((Stage.height/2)+y_oran) = 600 olmuş oluyor.

Bu y kordinatından alacagımız, en düşük 0 en yüksek 100 sayı degerini xscale yscale değişkenlerine bağla***** y kordinatı azaldıkça boyutunu da küçültüyoruz.
(*2) Persfektif konusunda bize en yakın obje herşeyin önündedir.Bura da bu mantıgı kullanıcaz.Çalışmanızı uzun uzun incelerseniz.Aslında bize en yakın objenin y kordinatı degeri de en büyüktür
Buna bağlı olarak depth(derinlik) degerini y kordinatına bağlıyoruz. Böylece y kordinatı büyük olan yani bize en yakın olan en önde olmuş oluyor...
Biraz uzun oldu ama umarım anlatabilmişimdir

Kolay gelsin...


kaynak site: