[flasher]

Kısa bir süre önce site analizi kısmında tasarım olarak göze hoş gelen bir siteden (betriebsraum.de) bahsetmiştim. Siteyi ziyaret eden arkadaşlar bilirler; site içersinde taşınabilir pencereler görünmekteydi. Bunları tasarlamanın o kadar da zor olmadığını göstermek düşüncesiyle flash bünyesinde taşınabilir, minimize ve close işlemlerini gerçekleştirebileceğimiz bir ders hazırlamayı uygun buldum.

İlk işimiz flash MX'i açıp File --> New (Kısayol: CTRL + N) ile 550 x 400 px bir çalışma alanı oluşturmak. Bu alanda iki farklı pencere sistemi yaratmayı düşünüyor ve bu doğrutuda hazırladığımız iki butonu (Aynı butonları da kullanabiliriz.) boş olan ilk layer'ımıza yerleştiriyoruz. Butonların içeriklerine ya da işaretlerden oluşturulmuş butonlar ise yanlarına açıklayıcı yazılar ekleyebiliriz.

İki tane farklı pencere demiştik. Aslında bunlardan bir tanesini oluşturduktan sonra duplicate ile ikincisini yaratıp ikinci oluşturduğumuz pencereyi uygun biçimde editlemek en mantıklı çözümdür. O nedenle ilk penceremizi oluşturmayı daha detaylı biçimde anlatacağız. İkincisini ise gerekli düzenlemeleri yapmak şeklinde tanımlayacağız.

Main Scene'de boş bir layer tanımlayıp (Insert --> Layer) yine Insert --> Symbol (Kısayol: CTRL + F8) ile boş bir movie clip oluşturalım. Önce birinci frame boş kalmak ve action scriptinde stop(); yazmak üzere ikinci frame'den itibaren penceremizin üst kısmında yer alacak araç çubuğu görevindeki dikdörtgen (Örnekte 196 x 23 px butonu yerleştirelim.) Instance Name'i amtopbutton olsun. Bu arada göstermek istediğimiz pencere boyutlarına uygun bir mask yaratıp (Örnek çalışma için 200 x 300 px) 25. frame'e taşıyalım. Bu mask 0 - 25 - 50. frameler arasında motion tween ile açılıp kapanmayı sağlayacak olan elemanımızdır. Buradan da basitçe anlaşılabileceği gibi 25. frame yine stop(); eylemine sahip, pencerenin tümünün görünür olduğu ve içeriğin bulunduğu parçadır. Tasarımınızdaki frame aralıklarına göre movie'yi oynattığınızda yalnızca üstteki araç çubuğunun göründüğü noktayı belirleyerek (Örnekte 48. frame) bu frame bir stop(); kodunu yerleştirelim. Yine 2. ve 48. frame aralığında görünür olmak üzere iki küçük kare buton oluşturup bunları minimize ve close işlemlerini gerçekleştireceklermiş gibi düşünelim. Bu butonlardan minimize olarak tasarladığımızın action scriptine;

on (release) {
	gotoAndPlay(26);
}

yazalım. Close olarak tasarladığımıza ise;

on (press) {
	_root.ampagestatics = false ;
	gotoAndStop(1);
}

yazalım.

Minimize edilmiş olan penceremizin görüntüsünü sağlayan 48. frame'e ise yine aynı boyutlara sahip bir restore butonu koyup action scriptini aşağıdaki gibi vermemiz uygun olacaktır:

on (release) {
	gotoAndPlay(3);
}

Pencereyi yarattığımız movie clip'imizin ikinci frame'ine;

_root.ampagestatics = true ;

kodunu yerleştirerek ana sahnemizde ampagestatics adlı bir değişken tanımlayıp bunun değişken değerini true olarak ayarlayalım. Bu bize pencereyi tetikleyen butona ikinci defa basıldığında pencerenin zaten açık olduğu için herhangi bir eylem yürütmemesini sağlayacaktır.

amtopbutton.tabEnabled = false;

kodlaması ise üst çubuk olarak tasarladığımız butonun tab tuşuna yanıt vermemesini sağlar. Bu top button'un action scriptine;

on (rollOver) {
	amtopbutton.useHandCursor = false; //Mouse işaretçisinin bir el işaretçisine dönüşmemesi için.
}
on (press) {
	startDrag(am); //Pencerenin taşınabilirliğini sağlamak için.
	newdepths = newdepths+1; //Yeni ve eskisinden bir üst değere sahip bir derinlik için.
	_root.am.swapDepths(newdepths); //Penceremize bu yeni derinliği uygulamak için.
}
on (release) {
	stopDrag(); //Pencere bırakıldığında o an için bulunduğu noktada kalması için.
}

yazalım.

Yine tab tuşunun erksiz olması için minimize yapan buton (ampminb) ve maximize yapan buton (ampmaxb) instance name'leri verildikten sonra bulundukları layer'ın action scripti'ne;

ampminb.tabEnabled = false;
ampmaxb.tabEnabled = false;

kodlaması girilir.

Main Scene'de ilk frame'imize yerleştireceğimiz bu pencere movie clip'ine about me kısaltması olarak am instance name'ini verelim. Sonrasında yine ilk frame'in action script kısmına bir fonksiyon tanımlayarak penceremizin açılmasını ayarlayan aşağıdaki kodları yazalım:

ampagestatics = false ;//Pencerenin açık olup olmadığını kontrol eden değişkenimizi false olarak tanımlamak için.
newdepths = 1;//newdepths adında bir değişken tanımlayıp 1 değerini vermek için.
_global.newdepths; //newdepths değişkenini çalışma içinde global bir değişken haline getirmek için.
function ampageopen () {
	if (ampagestatics == false) {
		setProperty("am", _x, "125"); //açılan pencerenin x koardinatını belirlemek için.
		setProperty("am", _y, "200"); //açılan pencerenin y koardinatını belirlemek için.
		tellTarget ("am") {
		gotoAndPlay(2); //pencereyi açmak için.
             }
	}
	else { stop(); //eğer pencere zaten açıksa işlem yürütmemesi  için.
	}
}

Bundan sonraki işlem Library'den (Kısayol: CTRL + L) bulacağımız movie clip'i Duplicate etmek ve içeriğini uygun biçimde editlemek suretiyle çalışmamıza dahil etmektir. Bu işlem örnekte web mail olarak gösterilmiştir. Bu şekilde text ile anlatımı oldukça zor olsa da örnek dosya üzerinde inceleme yapacak olursanız daha kolay anlaşılabileceğini düşünüyorum.

Geldik hazırladığımız pencereyi nasıl açtıracağımıza... Pencerenin açılmasını sağlayacak butona fonsiyonu çağırmasını söylemek yeterli olacaktır.

on (release) {
	ampageopen ();
}

Böylece taşınabilen, minimize close ve restore özelliklerine, üstüste bindiğinde derinlik ayarına sahip bir pencere sistemimiz oldu. Elbette movie alanı dışına sürüklenmeye çalışıldığı vakit bunu engelleyen ya da daha farklı şekillerde özelliklere sahip gelişmiş uygulamalar yapmak sizin elinizde.

Çalışmamızı kaydetmek için File --> Save (Kısayol: CTRL +S) yapmamız yeterlidir. Hoş burada kaydedilmişi var.