antalya web tasarım

Mouse Etrafında Saçılan Parçacıklar Yapmak

Bu örneğimizde farenin etrafında saçılan parçacıklar (particles) yapacağız. Demoda gördüğünüz gibi fare hareket ettikçe yeni parçacıklar ekleniyor ve eklenen bu parçacıklar bir süre sonra küçülerek kayboluyorlar. İlk olarak yeni bir ActionScript 3.0 belgesi açalım ve arkaplan rengini #333333 olarak değiştirelim.
Bu örneğimizde farenin etrafında saçılan parçacıklar (particles) yapacağız. Demoda gördüğünüz gibi fare hareket ettikçe yeni parçacıklar ekleniyor ve eklenen bu parçacıklar bir süre sonra küçülerek kayboluyorlar. İlk olarak yeni bir ActionScript 3.0 belgesi açalım ve arkaplan rengini #333333 olarak değiştirelim.

Arkaplan rengini değiştirdikten sonra araç çubuğundan PolyStar Tool’u seçelim ve Properties panelindeki Options sekmesine tıklayarak Styles sekmesinden Star’ı seçelim, Number of Sides sekmesi ile de yıldızımızın köşe sayısını belirleyelim. Ben yıldızın köşe sayısını 7 olarak belirledim. Dolgu rengi olarak beyaz rengi seçelim ve sahneye bir yıldız çizelim.

Yıldızı Çizdikten sonra F8 kısayol tuşu ile Convert to Symbol penceresini açalım ve Name kısmına Yildiz yazalım(verdiğimiz ismin ilk harfinin büyük olmasına dikkat edelim). Sembole isim verdikten sonra Advanced sekmesine tıklayalım ve açılan pencerede Export For ActionScript seçeneğinin yanındaki onay kutucuğunu işaretleyelim. Class sekmesine sembolümüze verdiğimiz ismin otomatik olarak geldiğini göreceksiniz. Ok butonuna tıklayak pencereyi kapatalım ve sahne üzerindeki sembolü silelim. Bu yaptığımız işlem sayesinde oluşturduğumuz sembole ActionScript içerisinden ulaşıp kullanabileceğiz.

Artık kodları yazmaya başlayabiliriz. Yapacağımız ilk işlemler Library’deki sembolümüze ulaşmak ve fare hareket ettikçe sahneye eklenmesini sağlamak olacak. Fare hareketlerini için olay dinleyicimizi sahneye ekleyeceğiz. Oluşturduğumuz sembolü sahneye eklemek içinse addChild() metodunu kullanacağız. Actions panelini açalım ve ilk olarak aşağıdaki kodları yazalım.

var yildiz:Yildiz;

stage.addEventListener(MouseEvent.MOUSE_MOVE, tasi);

function tasi(e:MouseEvent) {
	yildiz=new Yildiz();

	addChild(yildiz);
}
}

Uygulamayı test ettiğimizde nesnemizin sahnenin üst köşesine yani x ve y ekseninde 0 noktasına eklendiğini göreceğiz. Nesnenin farenin etrafında olabilmesi için x ve y konumlarını sürekli olarak değiştirmemiz gerekiyor. Bu işlemi gerçekleştirebilmek için addChild(yildiz) satırının sonuna gellerek bir alt satıra geçelim ve aşağıdaki kodu ekleyelim. Burada yaptığımız işlem nesnemizin x ve konumlarını farenin o anki x ve y konumlarına göre belirlemek. Nesnenin farenin etrafında sürekli olarak aynı yere gelmemesi içinde mouseX ve moueY değerlerine ilave olarak Math.random() ile rastgele bir sayı üreterek nesnenin genişlik ve yükseklik değerleriyle çarpıyoruz.

yildiz.x=mouseX+Math.random()*yildiz.width;
yildiz.y=mouseY+Math.random()*yildiz.height;

Uygulamayı şimdi test ettiğimizde yildizlarin istediğimiz gibi eklendiğini göreceğiz. Şimdi de yıldızlarımıza animasyon ekleyerek hareket etmelerini sağlayalım.

yildiz.y=mouseY+Math.random()*yildiz.height;

satırının sonuna gelerek bir alt satıra geçellim ve yildizlarimiza olay dinleyici ekleyelim. Animasyona süreklilik kazandırmak için ENTER_FRAME olayını kullanacağız.

yildiz.addEventListener(Event.ENTER_FRAME, animasyon);

Olay dinleyiciyi ekledikten sonra fareHareketi isimli fonksiyonun dışarısına çıkalım ve animasyon isimli fonksiyonumuzu tanımlayalım. animasyon fonksiyonu ile ilk olarak yildizların belirlediğimiz bir oranda küçülmelerini, alfa değerlerinin azalmalarını ve aşağıya doğru hareket etmelerini sağlayacağız. Bu olayların hangi nesnelerde gerçekleşeceğini belirtmek için ise nesnemizin adı yerine e.target ifadesini kullanarak olay dinleyicide belirttiğimiz olayın gerçekleştiği nesneyi hedef alacağız. (e.target yerine yildiz yazarsak fonksiyonumuz istediğimiz gibi çalışmayacaktır. Nedeni ise yildiz yazdığımızda sahneye eklenen en son nesnenin hedef alınmasıdır. Sahneye sürekli olarak yeni bir nesne eklediğimiz içinde yenisi eklendiğinde öncekinin fonksiyonu geçersiz olacaktır.)

function animasyon(e:Event) {
	e.target.scaleX-=.03;
	e.target.scaleY-=.03;
	e.target.alpha-=.03;
	e.target.y+=3;
}

Evet yıldızlarımız artık istediğimiz gibi hareket ediyor. Fakat addChild() ile sürekli olarak sahneye eklediğimiz için bir süre sonra animasyon yavaşlamaya ve uygulama şişmeye başlayacaktır. Bunun önüne geçebilmek için eklediğimiz yıldızları bir süre sonra silmemiz gerek. Peki bu zamanı nasıl bulacağız? ENTER_FRAME olayı ile nesnemizin scaleX, scaleY ve alpha değerlerini sürekli olarak azaltıyoruz. Bu değerlerden biri 0 olduğunda o nesneye ait olay dinleyiciyi kaldırabilir ve sahneden silebiliriz. Bunun içinde bir koşullu ifade tanımlayacağız ve nesnenin alpha değeri 0 olduğunda olay dinleyiciyi kaldırıp, nesneyi sahneden sileceğiz. Yıldızları sahneye eklerken addChild() metodunu kullanmıştık. Silerkende removeChild() metodunu kullanacağız. animasyon fonksiyonu içerisinde son satıra gelelim ve bir alt satıra geçerek aşağıdaki kodları ekleyelim.

if (e.target.alpha<=0) {
	e.target.removeEventListener(Event.ENTER_FRAME, animasyon);
	removeChild(e.target as MovieClip);
}

Artık uygulamamız istediğimiz gibi çalışıyor. Eğer yıldızları rastgele renklendirmek istersek aşağıdaki kodları fareHareketi fonksiyonunun içerisinde addChild(yildiz) satırından sonrasına ekleyebiliriz. Burada ilk olarak renkleriDegistir isimli ColorTransform nesnesi tanımlıyoruz ve tanımladığımız nesnenin renk değerinin rastgele olması için Math.random() metodu ile rastgele bir sayı üreterek 0xFFFFFF değeri (beyaz rengin değeridir) ile çarpıyoruz.

var renkleriDegistir  : ColorTransform = new ColorTransform();
renkleriDegistir.color =  Math.random() * 0xffffff;
yildiz.transform.colorTransform = renkleriDegistir;

Kodların bitmiş hali aşağıdaki gibidir.

var yildiz:Yildiz;

stage.addEventListener(MouseEvent.MOUSE_MOVE, tasi);

function tasi(e:MouseEvent) {
	yildiz=new Yildiz();

	yildiz.x=mouseX+Math.random()*yildiz.width;
	yildiz.y=mouseY+Math.random()*yildiz.height;
	addChild(yildiz);

	var renkleriDegistir  : ColorTransform = new ColorTransform();
	renkleriDegistir.color=Math.random()*0xffffff;
	yildiz.transform.colorTransform=renkleriDegistir;

	yildiz.addEventListener(Event.ENTER_FRAME, animasyon);
}


function animasyon(e:Event) {
	e.target.scaleX-=.03;
	e.target.scaleY-=.03;
	e.target.alpha-=.03;
	e.target.y+=3;

	if (e.target.alpha<=0) {
		e.target.removeEventListener(Event.ENTER_FRAME, animasyon);
		removeChild(e.target as MovieClip);
	}
}