Flash Action Script 3D Karusel Menu PDF Yazdır e-Posta
İnternette gezerken bir çok sitede karşılaştığımız ve Action Script 3D ile yapılmış güzel görünümlü menülerden biri olan Karusal Menü örneğini burada kısaca ele alacağız. Zaten daha çok kodlar işlevsel olduğu için büyük ayrıntılar yok. Menü örneğine sayfa sonunda bakabilirsiniz. Evet şimdi başlayabiliriz sanırım...

1. 550 x 400 boyutlarında bir Flash Action Script 3.0 sayfası açalım.

 2. Yuvarlak köşeli bir dikdörtgen çizelim. Ben burada 158×35 pixel boyutlarında çizdim. Dikdörtgenin dışı için beyaz, içi için ise #0F7E88 rengini seçtim.

 

 


3. Dikdörtgenimizi Movie Clip’e dönüştürüyoruz “Menu Item”. “Registration” özelliğini merkez olarak işaretliyoruz.

4. Movie Clip’imizi çift tıklayarak açılan pencerede içerisine metnimizi yazıyoruz. Burada metnimizin “Dinamic Text” olmasına dikkat ediyoruz.

5. Yazımızın instance name alanına = “menuItemText“ ismini veriyoruz.

6. Yine yazımızın özellikler kısmından “Character Embedding” alanını tıklıyoruz ve resimde gördüğümüz alanları işaretliyoruz.

7. Ana sahnemize geliyoruz ve sayfada görünenleri yani “Menu Item” movie clipimizi siliyoruz.

8. Movie Clipimizi MenuItem ile bağdaştıralım (Linkage). Bu işlem için Flash CS4 kullananlar Library (kütüphane) bölümünde bulunan “MenuItem”e sağ tıklayıp özellikler (Properties) penceresini açarak ulaşabilirler. Açılan pencerede “Linkage” bölümündeki “Export For ActionScript” alanını işaretlemek yeterli olacaktır.

Sırada ActionScript 3 işlemleri

9.  Ekranımızdaki birinci kareye (Frame) aşağıdaki kodları ekleyelim. Flash CS4 kullananlar Action penceresini açmak için birinci karede sağ tıklayıp açılan menüden Action’ı tıklayabilirler. Action penceresini F9 kısa yol tuşu ile de açabiliriz.

Action Bölümüne Eklenecek Olan Kod:

//Menü sayısı
const NUMBER_OF_ITEMS:uint = 20;

//Bu dizi tüm menü öğelerini kapsar
var menuItems:Array = new Array();

//focal length ayarları
var focalLength:Number = 350;

//vanishing point ayarları
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;

// ENTER_FRAME dinleyicisine аngleSpeed açısal hız belirliyoruz
var angleSpeed:Number = 0;

//Daire yarıçapı
var radius:Number = 128;

//Menü öğeleri arasındaki açı (radian)
var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180;

//Bu ayarlar karusel döngüsü oluşturur
for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

//Yeni menu öğesi oluşturur
var menuItem:MenuItem = new MenuItem();

//Menü öğesi iin başlangış açısı
var startingAngle:Number = angleDifference * i;

// menü öğesi için "currentAngle" öznitelik
menuItem.currentAngle = startingAngle;

//Menü Öğesi konumu
menuItem.xpos3D =  -  radius * Math.cos(menuItem.currentAngle) * 0.5;
menuItem.ypos3D = radius * Math.sin(startingAngle);
menuItem.zpos3D = radius * Math.cos(startingAngle);

//Menü öğeleri için büyüklük oranı.
var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);

//Menü öğesi koordinatları
menuItem.scaleX = menuItem.scaleY = scaleRatio;

//Menü öğelerinin sahnedeki konumları (3D’den 2D’ye koordinat)
menuItem.x = vanishingPointX + menuItem.xpos3D * scaleRatio;
menuItem.y = vanishingPointY + menuItem.ypos3D * scaleRatio;

//İlk Alfayı belirliyoruz…
menuItem.alpha = 0.3;

//Menü öğesi için yazı ekliyoruz
menuItem.menuItemText.text = "Menu item " + i;

//Sahnede metin alanlarında fare olaylarını istemiyoruz
menuItem.mouseChildren = false;

//menu öğeleri için MOUSE_OVER, MOUSE_OUT ve CLICK işlemleri
menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
menuItem.addEventListener(MouseEvent.CLICK, itemClicked);

Menü öğesi dizisi
menuItems.push(menuItem);

//Sahneye bir menü ekle
addChild(menuItem);
}

//Animasyon için ENTER_FRAMEdinleyicisi ekliyoruz
addEventListener(Event.ENTER_FRAME, moveCarousel);

//Bu fonksiyon her karede uygulanıyor
function moveCarousel(e:Event):void {

// mouseYhızını belirliyoruz
angleSpeed = (mouseY - stage.stageHeight / 2) * 0.0002;

//Menü aracılığı ile loop öğeleri
for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

//Yerel değişkende menü öğesini hatırla
var menuItem:MenuItem = (MenuItem)(menuItems[i]);

 //Geçerli öğe açısını güncelliyoruz
 menuItem.currentAngle += angleSpeed;

 //Ölçekleme faktörünü hesapla
 var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);

 //katsayıya uygun öğe ölçek oranı
menuItem.scaleX=menuItem.scaleY=scaleRatio;

 //Yeni 3D koordinatı ayarları
 menuItem.xpos3D=- radius*Math.cos(menuItem.currentAngle)*0.5;
 menuItem.ypos3D=radius*Math.sin(menuItem.currentAngle);
 menuItem.zpos3D=radius*Math.cos(menuItem.currentAngle);

 //Öğe koordinatlarını değiştiriyoruz
 menuItem.x=vanishingPointX+menuItem.xpos3D*scaleRatio;
menuItem.y=vanishingPointY+menuItem.ypos3D*scaleRatio;
}

//birbirleri ile örtüşen öğelerin organize fonksiyonu
sortZ();
}

//Bu fonksiyon öğelerin birbiri ile örtüşmesini sağlıyor
functionsortZ():void {

//Organize dizinin en yüksek öğesini belirliyoruz
//z konum (= en uzaktaki) dizinin ilk öğesi
menuItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);

//görünüm için yeni indexler
for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {
 setChildIndex(menuItems[i], i);
}
}

//Bu fonksiyon menünün fareile olan ilişkisini sağlıyor
function mouseOverItem(e:Event):void {

//Alfa 1’i değiştiriyoruz
e.target.alpha=1;
}

//bu fonksiyon farenin menüden uzaklaşması işlemini belirliyor
function mouseOutItem(e:Event):void {

//alfa 0.3’ü deüiştiriyoruz
e.target.alpha=0.3;
}

// menü öğesi tılandığında bu fonksiyon işliyor
function itemClicked(e:Event):void {

trace("Menüye tıklandı! Buraya kendi ifadenizi yazınız.");
}

Faydalı olması dileğiyle...
Tercüme: Kerim Sarıgül
Kaynak: demiart.ru

 

Yorum ekle


Güvenlik kodu
Yenile

KIRGIZCA - RUSÇA - TÜRKÇE SÖZLÜKLER

TÜRKÇE ÖĞRETİMİ

ÜYE GİRİŞ FORMU



Tüm Hakları Saklıdır. Sitedeki ders ve makaleler kaynak göstermek şartı ile kullanılabilir. www.kerimsarigul.com 2005 - 2012