Event Handler tanımlama

Zaman zaman ayrı ayrı fonksiyonlar eventler tanımlarız. Tanımlarken belirli kurallara bağlı kalırız. Örneğin boolean bir değere göre fonksiyon oluşturma number,string,array vs vs uzar gider. Bu gibi durumlarda bunu kısa if-else kısaltmasıyla belki çözüme ulaştırabiliriz.

Örneğin sahnede bir objemiz var ve biz bu objemizi sürekli kontrol etmek istiyoruz ve aynı zamanda ekleyip silmekde istiyoruz. Bu gibi durumlarda bir number ya da boolean değer atayıp yapmak işimizi kısalta bilir. Aşağıdaki olayda soru işaretinden önceki satıra uygunsa soru işaretinden sonraki olayları uygula değilse iki nokta üst üste olan komutları uygula demiş oluyoruz.


var val:Number = 1;

addEventListener(Event.ENTER_FRAME, val == 1 ? (onComplete) : (onEnter));

function onComplete(event:Event):void
{
	trace("tamamlandi.");
	removeEventListener(Event.ENTER_FRAME, onComplete);
}

function onEnter(event:Event):void
{
	trace("gitti");
}
Advertisements

Stringlerde türkçe karakterler

Yaptığımız herhangi bir uygulamada türkçe karakterler sorun olabiliyor bazen bu sorunu çözebilmek için bi fonksiyona atmamız gerekiyor. Bunun içine bir argüman alıyoruz ve stringleri parçalıp yerine yenisini gönderiyoruz..

var cities:String = "Adıyaman,Şanlı Urfa,Siirt,Çankırı";
var upperCase:String = getTurkishUpperCase(cities);
function getTurkishUpperCase(str:String):String
{
	str = str.split("i").join("İ");
	str = str.split("ı").join("I");
	str = str.toUpperCase()
	return str;
}

trace(upperCase);

jQuery ile Klavye Hareketi Sağlama

jQuery’nin bu kadar kapsamlı bir kütüphane olduğunu bilmiyordum. Baktıkça daha iyi bir kütüphane olduğunu anlamaya başladım. Yapı olarak çok kuvetli. Şuanda yaptığım uygulama kare hareketini sağlamak oldu. Bunu yaparken dökümana klavye ile sağ sol tuşuyla bastığında hareket etmesini sağlıyorum. Aşağıdaki yapıda yaptığım olay ise code adında bir değişken oluşturuyorum ve bununla x y koordinat bilgilerini ayarlıyorum.Sonuna string birleştirme ile birleştirip sağ sola hareket etmesini sağlıyorum.

offset() değeri

Bir elamanın konumunu yani ekranda sola ve yukarıya olan uzaklığını bulmak için kullanılır.

Not: Her tarayıcının kendine göre margin padding değerleri olduğu için ilk olarak css ‘de margin ve padding değerlerini sıfırlamak gerekiyor. Daha sonra bu kodları denerseniz offset() da daha iyi performans sağlarsınız.


$(function(){

	var xPos = $('#kare').offset().left;
	var yPos = $('#kare').offset().top;

$(document).keydown(function(event)
{
	var code = (event.which) ? event.which : event.keyCode;

	if(code == 37)
	{
		xPos-=5;
		$("#kare").css("left", xPos+"px");
	}
	if(code == 38)
	{
		yPos-=5;
		$("#kare").css("top", yPos+"px");
	}
	if(code == 39)
	{
		xPos+=5;
		$("#kare").css("left", xPos+"px");
	}
	if(code == 40)
	{
		yPos+=5;
		$("#kare").css("top", yPos+"px");
	}
	});
})

JQuery ile Html Sayfası Yükleme

Yaptığımız projelerde dinamik olarak html sayfası yüklemek isteyebiliriz. Jquery ile bunu kısa yolla load metodyla çözebiliyoruz diğer programlama dillerindeki load metodu gibi. Sadece sayfa yüklenirken kullanıcıyı fazla bekletmemek adına preloader dediğimiz olayı ekleyebiliriz. Bunun için .gif formatında bir preloader animasyonunu bulmanız gerekiyor. Ardından html dökümanın içerisine bir adet buton koyuyoruz ve clickediğimizi algılayabilmesi için bir id atıyoruz. Ben “btn” olarak verdim. Daha sonra preloaderımızı yükleyeceğimiz div imize bir id atıyoruz bunun adına da “bilgi” verdim. Daha sonrasında head tagının içerisine aşağıdaki jquery kodlarını giriyorum.


$(function(){
	$("#btn").click(showProgress);
})

function showProgress()
{
        $("#bilgi").empty().html('loading.gif').delay(1000);
	$("#bilgi").load("ornek.html");
}

Javascript ile CreateElement’lere Değer Atamak

Bazı durumlarda dinamik olarak javascript kodu üretmek gerekir. Bunun için yapılması en mantıklı olay createElement öğesidir. Bununla birlikte yeni bir “tag” oluşturulur ve arından içerisi doldurulur. İlk olarak benim yaptığım olay bir div oluşturmak ardından dive karakteristik özelliklerini atamak (kalınlık,font büyüklüğü vs.)  Html Head tagının script kısmına yazılacak kodlar.


var container;
var ornek_div;

function init() 
{
container = document.createElement('div');
document.body.appendChild(container);
container.style.fontWeight = "bold";
container.style.paddingLeft = "20px";
container.style.paddingTop = "10px";
container.style.position = "absolute";
container.style.color = "#ffffff";
container.innerHTML = "Deneme Yazısı."
container.setAttribute("id","ornek_div");
//container.setAttribute("style","width:50px; height:50px; background:#000;");

ornek_div = document.getElementById("ornek_div");
ornek_div.style.backgroundColor = "#000000";
ornek_div.style.width = "200px";
ornek_div.style.height = "200px";
}

Jquery ile Xml Bağlantısı

Xml dökümanları her programlama dili için bir nimettir. Veritabanı yerine kullanabileceğimiz bu yapıyı Flash ve Jquery gibi projelerimizde kullanabilmekteyiz. Bunun için Ajax yapısını kullanmamız gerekiyor. Tam örneğini görebilmek için http://labs.curyy.com/query_xml/ adresini ziyaret edebilirsiniz. Xml yapısını alabilmek için herhangi bir browser’ın f12 özelliğini kullanabilirsiniz. Şuanda verdiğimde güvenlik nedeniyle algılamıyor.

Jquery kodlarımız şu şekilde olacak kodların içerisinde gerekli açıklamaları yapmaya çalıştım;
Not:  Kodları kullanabilmek için herhangi bir sunucuya atmanız gerekmektedir.

OOP MovieClip(parent)

OPP projelerimizde Library‘den Linkage yoluyla çağırdığımız objelerin üstüne yani Main classımızdaki herhangi bir fonksiyon ya da değişkene ulaşmak istediğimizde yapmamız gereken yol Parent seçicisi olacaktır. Örneğin;

Main.fla ‘nın içinde Libraryde bulunan Linkage edilmiş bir MovieClibimiz olsun. Linkage ettiğimiz MovieClibimizin Class adı Kare.as olsun. Daha sonrasında ise Main.fla ‘ımızın Document Class yapısı ise Main.as olsun bizim ulaşmamız gereken değer Main.as dir. Şimdi yapımız şu şekilde olacaktır.

Main.as


package
{
   import flash.display.MovieClip;
   public class Main extends MovieClip
   {
       public function deneme ():void
       {
         trace ("DENEME PARENT İLE OLUŞTURULMUŞ FONKSİYON");
       }
    }
}

Kare.as

package
{
   import flash.display.MovieClip;
   public class Kare extends DisplayState
   {
      public function Kare ():void
      {
         // Document Classımızdaki deneme() isimli fonksiyonumuza ulaşmış olduk.
         MovieClip(parent).deneme();
       }
    }
}

Javascript ile Haber Akışını Sağlamak

Açıklamaları yakında ekleyeceğim sadece paylaşım açısından bir çalışma olsun istiyorum.

bottom.js oluşturulur.

/**
$(CBI)* ...
$(CBI)* @author Serhat Sezer
$(CBI)*/

(function() {

	//alert("sayfaya girdi ");

	var isLoad = false;

	$(window).scroll(function(){

		if((($(window).scrollTop()+(window).height())+250) >= $(document).height())
		{
			//alert('sayfa büyük.');
			if(isLoad == false)
			{
				isLoad = true;
				$("#loadingBarDiv").css("display","block");
				$.get("ServerSide.php?start=" + $("#loadedMaxDiv").val(), function(e){

					$("body").append(e);
					$("#loadedMaxDiv").val( parseInt($("#loadMaxDiv").val())+50 );
					$("loadingBarDiv").css("display","none");
					isLoad = false;
				});
			}
		}
	});
})();

main.html oluşturulur.

Head tagının içerisine bir -Script- bir de -Style- alanları oluşturulur.
Body kısmına iki adet div oluşturulu bunlardan -loadMaxDiv- olanına baya bir içerik girilir. Ya da Yukarıdaki gibi ServerSide bir dilden içerik çekebilir.
Head Kısmı -Script-

	jQuery(document).ready(function(){
	      jQuery("#loadMaxDiv").val(50);
	});

Head Kısmı – Style-

#loadingBarDiv { width: 100%; height: 20px; display:block; float:left; background: black; }

Actionscript 3 ile RSS Reader

Projenin durumuna göre Facebook,Twitter,Foursquare gibi Apiler kullanabiliyoruz. Benimde aklıma geldi bir RSS Reader oluşturmak istedim. Mantık çok basit. İlk olarak Component panelinden bir List öğesi seçiyoruz. Sonra sahneye sürükleyip bırakıyoruz. Componentten eklediğimiz objeye instance name olarak “list” adını veriyoruz. daha sonrasında ise rss adresimizi bilmemiz gerekiyor bunun için ben kendi blog sitemin rss adresini kullandım. Mantık olarak oluşturacağımız öğeler xml ile aynı. Zaten RSS dosyasını XML dosyası gibi düşünebilirsiniz. Yapmamız gereken işlemler şu şekilde olmalıdır adım adım anlatacak olursak:

URLLoader Oluşturulur.(RSS readerımızı okumamız için)
URLRequest Oluşturulur. (Adres bilgilerini belirleyebileceğimiz bir alan. Yani RSS Adresi istek göndereceğimiz alan)
XML Oluşturulur.(Gelen Dataları yükleyeceğimiz bölüm)

package
 {
 import flash.display.MovieClip;
 import flash.events.Event;
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 import flash.net.navigateToURL;
 import fl.controls.TextArea;
 import fl.controls.List;</code>
/**
 * @author Serhat Sezer
 */
public class RssReader extends MovieClip
 {
 private var rssLoader:URLLoader;
 private var rssReq:URLRequest;
 private var rssXML:XML;
 private var contentList:XMLList;
public function RssReader()
 {
 rssXML = new XML ();
 rssXML.ignoreWhitespace = true;
rssLoader = new URLLoader ();
 rssReq = new URLRequest ("https://serhatsezer.wordpress.com/feed/");
 rssLoader.load (rssReq);
 rssLoader.addEventListener (Event.COMPLETE, onRssComplete);
}
private function onRssComplete(event:Event):void
 {
 rssXML = new XML (event.target.data);
for (var item:String in rssXML.channel.item)
 {
 list.addItem ( { label: rssXML.channel.item[item].pubDate.substr (0, 20) + " " +rssXML.channel.item[item].title } );
 list.addEventListener (Event.CHANGE,onChangeList);
 }
 }
private function onChangeList(event:Event):void
 {
 var headTitle:String = event.currentTarget.selectedItem.label.substr (20);
 txtHeadTitle.text = headTitle;
contentList = rssXML.channel.item[event.target.selectedIndex].children ();
 for (var i:int = 0; i &lt; contentList.length(); i++)
 {
 if (contentList[i].name () == "description")
 {
 i++;
 break;
 }
 var item:XML = contentList[i].children ()[0];
 navigateToURL(new URLRequest(item.toString ()));
}
 }
 }
 }

Sadece belirli alanları anlatmayı uygun görüyorum.

 for (var item:String in rssXML.channel.item)
 {
 list.addItem ( { label: rssXML.channel.item[item].pubDate.substr (0, 20) + " " +rssXML.channel.item[item].title } );
 list.addEventListener (Event.CHANGE,onChangeList);
 }
 

Bu alanda eklediğimiz list compoentnine rss den aldığımız değeri basıyoruz. İkinci kısımda ise bir listener atıyoruz ve bu listenera gerekli bir kaç işlem yapacağız. Bunlar selectedIndex gibi işlemler yapıyoruz.

Kaynak dosyalar

ActionScript ile 3d

Actionscript ile 3d programlama oldukça geniş. Eğer siz oyun yapmak istiyorsanız ya da herhangi bir 3d çalışmasında bulunmak istiyorsanız o kadar çok kaynak var ki elinizde. Bunlardan sıralayabileceğim ;

Fizik Motoru :
Box2D (En sağlam fizik motorudur. İçerisinde bir çok class barındırır kod yazmadan da bu 2d motorunu kullanabilirsiniz komponentler sayesinde.)

3D Motorları :

En güçlüsü kuşkusuz ki Alternativa3D Adobe resmi olarak destek vermektedir.
Bir ikincisi bu da kullanımı yaygın ve internette bi çok örneğini bulabileceğiniz Away3D
Eski bir 3d motoru ama bir okadarda işlevli örneği bol Papervision3D
* 3D olarak paylaşabileceğim ve aralarında en sağlam ve belirgin aynı zamanda en yaygın olanları bunlar. Bunların dışındakilere pek bakmamızı öneririm. Tabii sizin bileceğiniz bir şey.

Oyun Motorları :

İşte bu olan çok geniş o yüzden size şu linki veriyorum bir incelemekte fayda var.
http://www.adobe.com/devnet/games.html ayrıca bunlara da bir göz atmak lazım
http://www.flashrealtime.com/flash-game-library-engine-list/#2D

Bunların en belirligini flixel ve FlashPunk bunun yanında Starling çıktı o da adobe’un desteklediği bir oyun motoru.

Ayrıca bahsetmek isterim ki Adobe son zamanlarda duyurduğu stage3D ile iyi örnekler yapabilirsiniz. Bunun yanında bir de matrix3D var yani adobe flash platfromu geniş bir platform ve yapacaklarınızın sınırı yok. Bunu Fwa daki sitelere bakarakta anlayabilirsiniz.

Matrix3D tanıtmak amacıyla bir örnek.

*Aşağıdaki örnekte bir şekil çizilir. Daha sonrasında açıyı sürekli olarak değiştirebilmek için enterframe evente bağlanır (Event.ENTER_FRAME) daha sonrasında açıyı bulabilmek için geometri sınıfı olan flash.geom sınıfı kullanılır ve Matrix3D ile açı hesabı yapılır.

var shape : Shape = new Shape();
shape.graphics.beginFill(0xFF0000);
shape.graphics.drawRect(300,150,50,50);
shape.graphics.endFill();
shape.z = 0;
addChild(shape);
addEventListener(Event.ENTER_FRAME,loop);

function loop(event:Event):void
{
shape.z = 1;
shape.transform.matrix3D.appendTranslation(0,0,0);
shape.transform.matrix3D.appendRotation(1,Vector3D.Y_AXIS);
}

Eğer açıyı X açısından ve ya Z açısından almak istersek.
Vector3D.X_AXIS
Vector3D.Z_AXIS

demek yeterli olacaktır.