Tween Sınıfı ile Senkronizasyon

Sınıf (class) ortak becerileri ve özellikleri tanımlayan scritlerden oluşan bir kokeksiyondur. Sınıfları işlevsellik olarak kullanılan birer şablon olarak düşünebilirsiniz.

Sınıf (class) ortak becerileri ve özellikleri tanımlayan scritlerden oluşan bir kokeksiyondur. Sınıfları işlevsellik olarak kullanılan birer şablon olarak düşünebilirsiniz.

Not: Eğer kendi sınıfınızı oluşturmak istiyorsanız, uzantısı as olan harici dosyalar oluşturmanız gerekir. Bu makalemizde sınıf yaratmayacağız. Flash ile birlikte gelen bir çok sınıf var ve biz Tween sınıfını kullanacağız.

3 ayrı layer yaratıp isimlerine action, alpha ve butonlar diyelim. Sahnemize butonlar layerımıza 100 x 22 px ebatlarında 3 adet buton oluşturalım. Bu butonların konumları,


1. buton x = 0 y = 0

2. buton x = 0 y = 23

3. buton x = 0 y = 46



olsun.

Butonların isntance name lerini


1. buton: b1

2. buton: b2

3. buton: b3



şeklinde belirleyelim.

Her butonun içerisine butonun üzerine geleçek şekilde bir dynamic text yaratıp instance namelerini yazi_1 , yazi_2 , yazi_3 şekilde belirleyelim.

Actions layerına gelip F9 kısa yolu ile action script panelini açarak şu kodları yazalım.




Stage.scaleMode = noScale; // Sahnenin kendi orjinal boyutunu korumasını sağlıyoruz.

import mx.transitions.Tween; // Tween sımıfını çalışma içerisine import ediyoruz.
import mx.transitions.easing.*;

b1.yazi_1.text = "ANA SAYFA"; // b1 ins name'ine sahip butonumuzun içerisindeki yazi_1 ins name'ine sahip text'e içeriği ekledik.
b2.yazi_2.text = "HAKKIMDA"; // b2 ins name'ine sahip butonumuzun içerisindeki yazi_1 ins name'ine sahip text'e içeriği ekledik.
b3.yazi_3.text = "İLETİŞİM"; // b3 ins name'ine sahip butonumuzun içerisindeki yazi_1 ins name'ine sahip text'e içeriği ekledik.

// ilerle isminde bir fonksyon tanımladık ve bu fonksyonun parametreleri sırasıyla animasyonun uygulanacağı hedef movieClip, MC nin yatay başlangıç ve bitiş konumu, dikey başlangıç ve bitiş konumu yaptık.
ilerle = function(mc, ailk, ason, bilk, bson) {
new Tween(mc, "_x", Elastic.easeOut, ailk, ason, 1, true);
new Tween(mc, "_y", Elastic.easeOut, bilk, bson, 1, true);
}



// ana sayfa
var j = 1;
// burada j isminde bir değişken tanımlıyoruz. Bunun nedeni butonları senkronize ederken butonun durumlarını sistemin algılaması ve ona göre hareket etmesi. Örneğin j değişkeninin değeri 1 iken butonların sıralı bir şekilde alta dizilmesini ve bu dizilme sonunda j değişkeninin değerini 2 yaparak görevi sonlandırmasını sağlarız. Bu durumda aynı butona ikinci tıklamamızda j değişkeninin değeri eğer 2 ise başka işlem yaptırmamız mümkün olabilir.

b1.onRelease = function() { // b1 butonuna tıklandığında
if( j == 1) { // eğer j değişkeni 1 değerine eşit ise
ilerle(b1,5,207); // ilerle fonksyonu içindeki parametreleri sırasıyla animasyonun uygulanacağı hedef movieClip, MC nin yatay başlangıç ve bitiş konumu, dikey başlangıç ve bitiş konumu değerler ile belirttik.
ilerle(b2,5,207);
ilerle(b3,5,207);
j = 2; // burada j değişkeninin değerini 2 yapıyoruz.
d = 1; // d değişkeninin değerini ise 1 yapıyoruz
ssx.text = "ANA SAYFADASINIZ"; // ssx ins name ine sahip dynamic text imize durum raporu verdiriyoruz.
} else if ( j == 4) { // j değişkeninin 4 değerine eşitliğini sorguluyoruz.
ilerle(b1,5,207,0);
ilerle(b2,5,207,23);
ilerle(b3,5,207,46);
j = 3; // j değişkeninin değerini 3 e eşitledik.
d = 1; // d değişkeninin değerini 1 e eşitledik.
k = 1; // k değişkeninin değerini 1 e eşitledik.
ssx.text = "ANA SAYFADASINIZ";
} else if ( j == 3) { // j değişkeninin 3 olan eşitliğini sorguluyoruz ve eğer 3 e eşit ise dur komutunu çalıştırıyorum.
stop();

}
}

// hakkımda
var d = 1;

b2.onRelease = function() {
if( d == 1) {
ilerle(b1,0,0);
ilerle(b2,5,105,0);
ilerle(b3,5,210,0);
j = 4;
d = 4;
ssx.text = "HAKKIMDA SAYFASINDASINIZ";
} else if ( d == 4) {
stop();
j = 4;
} else if ( d == 5) {
ilerle(b1,5,0,0);
ilerle(b2,5,105,0);
ilerle(b3,5,210,0);
d = 4;
k = 1;
ssx.text = "HAKKIMDA SAYFASINDASINIZ";
}

}

//iletişim
var k = 1;

b3.onRelease = function() {
if( k == 1) {
ilerle(b1,5,0,127);
ilerle(b2,5,105,127);
ilerle(b3,5,210,127);
k = 2;
j = 4;
d = 5;
ssx.text = "İLETİŞİM SAYFASINDASINIZ";
} else if( k == 2) {
stop();

}
}

// Bildiğiniz gibi alpha isminde bir layer yaratmıştık. Bu layer'ın frame'ine yazdığımız kod ile butonların üzerine gelindiğinde alphaları üzerinde düşüş ya da artış sağlamak mümkün. örnek kodumuz şöyle olmalıdır.

b1.onRollOver = function() { // b1 butonuna mouse geldiğinde
this.onEnterFrame = function() {
this._alpha += (70 - this._alpha)*0.2; // butonun alphası %70 e düşsün
}
}

b1.onRollOut = function() {
this.onEnterFrame = function() {
this._alpha += (100 - this._alpha)*0.2;
}
}
//Diğer kod ise 100 e çıkmasını sağlar.




Hepsi bu kadar. Örnek çalışmayı indirmek için aşağıdaki linkte tıklayınız. Bir sonraki makalemde görüşmek üzere.

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

çok güzel olmuş böyle bir çalışmayı bizimle paylaştığınız için teşkler
ben yaptım ama sizin örnekte gösterdiğiniz gibi olmadı.ve bişeyde anlamadım kodlardan
sonunda yaptım:9.güzel bi çalışma teşekkürler
teşekkürler. ama link çallışmıyo.
linki yenileme gibi bir sansınız varsa iyi olur. biraz karısık cunku . . .

Yukarı Git