?> photoders » ActionScript 3.0 http://www.photoders.com Tue, 14 Jun 2011 11:41:58 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 İletişim Form ActionScript 3.0 http://www.photoders.com/iletisim-form-actionscript-3-0 http://www.photoders.com/iletisim-form-actionscript-3-0#comments Mon, 14 Feb 2011 13:21:07 +0000 admin http://www.photoders.com/?p=2029 photodersÇalışmamızda sitenizde kullanabileceğiniz actionscript 3.0 uygulamalı flash iletişim formu çalışmasını anlatmaya çalışacağım. Yeni bir çalışma sayfası açalım actionscript 3 olacak unutmayalım sizlere hatırlatmamda yarar var çalışmayı hazırladıktan sonra yaptığım denemelerde hiçbir sorun ile karşılaşmadım gayet güzel çalıştı.
Çalışma sayfamı 350×350 px olarak açtım.
1- Rectangle Tool aracı ile örnek resimde gördüğünüz şekilde dış çizgisi olan içi beyaz renk dolu kutular oluşturalım.
photoders
Oluşturduğumuz kutuları group yaparak birleştirelim Ctrl+G seçili durumda F8 movie clip yapalım name olarak form diyelim. Klip içine girelim layer 1 adını bg olarak değişelim.
2- Yazı aracını seçelim yeni layer ekleyelim layer adı yazı alanı olsun. Text Type kutusundan input text seçimi yapalım örnek resimde görüldüğü gibi hazırladığımız kutulara denk gelecek şekilde text kutularını oluşturalım içlerine örnekte olduğu gibi yazı yazalım.
photoders
Senin isim yazılı yazıyı seçili yapalım instance name kutusuna contact_isim yazalım.
Sırayla diğer yazılara başlayalım.
-Senin Email yazılı yazıyı seçelim instance name kutusuna contact_email yazalım.
-Senin Konu yazılı yazıyı seçili yapalım instance name kutusuna contact_konu yazalım.
-Sizin Mesaj yazılı yazıyı seçili yapalım instance name kutusuna contact_mesaj yazalım.
-Mesaj bilgisi yazıyı seçelim instance name kutusuna mesaj_bilgisi yazalım.
Örnek resim senin yazısı seçili uygulama.
photoders
3- Yeni layer ekleyelim layer adını buton olarak değişelim rectangle tool aracı ile resimdekine benzer bir dikdörtgen oluşturalım seçili durumda F8 button yapalım name kutusuna buton yazalım. Buton içine girelim keyframe ekleyelim Over alanı etkin olsun Down alanına key ekleyelim F5 Hit alanı boş kalabilir.
photoders
Butonları yerleştirelim örnek resimde olduğu gibi kütüphaneden butonu alarak yerleştirelim. Sol taraftaki butonu seçili yapalım instance name kutusuna ilet_button yazalım.
Sağ tarafdaki butonu seçili yapalım instance name kutusuna sil_button yazalım.
photoders
Butonlar üzerine yazı yazalım sol buton ilet sağ buton sil şeklinde olsun.
photoders
4 Yeni layer ekleyelim layer adı etiket olsun örnek resimde gördüğünüz şekilde yazı aracı ile static text yazı yazalım.
photoders
5 Yeni layer ekleyelim layer adı action olsun ekli actions penceresini açalım F9 ekli kodları ekleyelim.

contact_isim.text = contact_email.text = contact_konu.text =
contact_mesaj.text = mesaj_bilgisi.text = "";

ilet_button.addEventListener(MouseEvent.CLICK, submit);
sil_button.addEventListener(MouseEvent.CLICK, reset);

var timer:Timer;
var var_load:URLLoader = new URLLoader;
var URL_request:URLRequest = new URLRequest( "send_email.php" );
URL_request.method = URLRequestMethod.POST;

function submit(e:MouseEvent):void
{
	if( contact_isim.text == "" || contact_email.text == "" ||
		contact_konu.text == "" || contact_mesaj.text == "" )
	{
		mesaj_bilgisi.text = "Gerekli yerleri doldurun.";
	}
	else if( !validate_email(contact_email.text) )
	{
		mesaj_bilgisi.text = "Gecerli email adresi giriniz.";
	}
	else
	{
		mesaj_bilgisi.text = "mesaj yollamak...";

		var email_data:String = "name=" + contact_isim.text
					   + "&email=" + contact_email.text
					   + "&subject=" + contact_konu.text
					   + "&message=" + contact_mesaj.text;

		var URL_vars:URLVariables = new URLVariables(email_data);
		URL_vars.dataFormat = URLLoaderDataFormat.TEXT;

		URL_request.data = URL_vars;
		var_load.load( URL_request );
		var_load.addEventListener(Event.COMPLETE, receive_response );
	}
}

function reset(e:MouseEvent):void
{
	contact_isim.text = contact_email.text = contact_konu.text =
	contact_mesaj.text = mesaj_bilgisi.text = "";
}

function validate_email(s:String):Boolean
{
	var p:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/;
	var r:Object = p.exec(s);
	if( r == null )
	{
		return false;
	}
	return true;
}

function receive_response(e:Event):void
{
	var loader:URLLoader = URLLoader(e.target);
    var email_status = new URLVariables(loader.data).success;

	if( email_status == "yes" )
	{
		mesaj_bilgiisi.text = "Tebrikler! Mesajniz yollandi .";
		timer = new Timer(500);
		timer.addEventListener(TimerEvent.TIMER, on_timer);
		timer.start();
	}
	else
	{
		mesaj_bilgisi.text = "Hata! mesaj iletilemedi tekrar deneyin.";
	}
}

function on_timer(te:TimerEvent):void
{
	if( timer.currentCount >= 10 )
	{
		contact_isim.text = contact_email.text = contact_konu.text =
		contact_mesaj.text = mesaj_bilgisi.text = "";
		timer.removeEventListener(TimerEvent.TIMER, on_timer);
	}
}

5 Scene 1 sahnemize gelelim layer 1 adını form olarak değişelim sahnedeki klip seçili instance name kutusuna contact_form yazalım.
Çalışmamız sona erdi şimdi php dosyasını düzenleyeceğiz. Dosyayı indirip inceleyin dosyamızın adı send_email.php oluyor notepad ile açıp kendi mail adresinizi belirtilen yere yazıp php destekli FTP dizine sfw dosyası ile beraber atın.

FLA+Php ekli dosyayı indir

]]>
http://www.photoders.com/iletisim-form-actionscript-3-0/feed 10
ActionScript Scrollbar 3.0 http://www.photoders.com/actionscript-scrollbar-3-0 http://www.photoders.com/actionscript-scrollbar-3-0#comments Wed, 09 Feb 2011 19:29:33 +0000 admin http://www.photoders.com/?p=2021 photodersFlash uygulamamızda actionscript 3.0 scrollbar uygulamasını yapmaya çalışacağız ilk olarak as3 çalışma sayfası açalım uygulamadaki sayfa değerlerimiz 430X320 px olarak ayarlanmıştır sizler istediğiniz değerde yapabilirsiniz.
1- Dikdörtgen aracı ile 10×100 px değerinde dış çizgisi olmayan bir dikdörtgen oluşturalım. Seçili durumda F8 klip yapalım name kutusuna scroll yazalım.

photoders
2-Sahneden scroll klip kütüphanede yer aldı scene1 sahneden kaldıralım. Tekrar rectangle tool aracı ile dikdörtgen oluşturalım değer olarak 10X300 px yapalım seçili durumda klip yapıyoruz name kutusuna scroll_alt yazalım.
photoders
3-Scroll_alt klip sahnede seçili durumda yeni bir klip yapalım. Name kutusuna scrollbar yazalım. Çift tıklama sonucu scrollbar klip içine girelim. Layer 1 adını değişelim layer1 de scroll_alt klip ekli durumda aynı isimi layer adınıda scroll_alt yapalım. Yeni layer ekleyelim layer adını scroll yapalım kütüphanede bulunana scroll klip alarak yerleştirelim merkez noktaları aynı hizaya getirelim.
photoders
4-scroll layer üzerinde sahnedeki scroll kli seçili durumda instance name kutusuna photoders_scroller yazalım. Scroll_alt layere gelelim scroll_alt klip seçili instance name kutusuna photoders_scrollalt yazalım.
photoders
5-Yeni layer ekleyelim layer adını action olarak değişelim 1 framede actions paneli açalım F9 ekli kodları yapıştıralım.

//www.photoders.com
var sd:Number;
var sr:Number;
var cd:Number;
var cr:Number;
var new_y:Number;
var drag_area:Rectangle;

var photoders_sayfa:MovieClip;
var photoders_sayfa_alani:MovieClip;
var scrolling_speed:Number; // 0.00 to 1.00

function scrolling( ct:String, ct_area:String, speed:Number ):void
{
	scrolling_speed = speed;
	if( scrolling_speed < 0 || scrolling_speed > 1 ) scrolling_speed = 0.50;

	photoders_sayfa = parent[ct];
	photoders_sayfa_alani = parent[ct_area];

	photoders_sayfa.mask = photoders_sayfa_alani;
	photoders_sayfa.x = photoders_sayfa_alani.x;
	photoders_sayfa.y = photoders_sayfa_alani.y;

	photoders_scroller.x = photoders_scrollalt.x;
	photoders_scroller.y = photoders_scrollalt.y;

	sr = photoders_sayfa_alani.height / photoders_sayfa.height;
	photoders_scroller.height = photoders_scrollalt.height * sr;

	sd = photoders_scrollalt.height - photoders_scroller.height;
	cd = photoders_sayfa.height - photoders_sayfa_alani.height;
	cr = cd / sd * 1.01;

	drag_area = new Rectangle(0, 0, 0, photoders_scrollalt.height - photoders_scroller.height);

	if ( photoders_sayfa.height <= photoders_sayfa_alani.height )
	{
		photoders_scroller.visible = photoders_scrollalt.visible = false;
	}

	photoders_scroller.addEventListener( MouseEvent.MOUSE_DOWN, scroller_drag );
	photoders_scroller.addEventListener( MouseEvent.MOUSE_UP, scroller_drop );
	this.addEventListener( Event.ENTER_FRAME, on_scroll );
}
function scroller_drag( me:MouseEvent ):void
{
	me.target.startDrag(false, drag_area);
	stage.addEventListener(MouseEvent.MOUSE_UP, up);
}
function scroller_drop( me:MouseEvent ):void
{
	me.target.stopDrag();
	stage.removeEventListener(MouseEvent.MOUSE_UP, up);
}
function up( me:MouseEvent ):void
{
	photoders_scroller.stopDrag();
}
function on_scroll( e:Event ):void
{
	new_y = photoders_sayfa_alani.y + photoders_scrollalt.y * cr - photoders_scroller.y  * cr;
	photoders_sayfa.y += ( new_y - photoders_sayfa.y ) * scrolling_speed;
}

6-Ana sayfamız boş durumda olsun Text Tool aracı ile Static text yazı yazalım. Seçili durumda klip yapalım name kutusuna sayfa yazalım. Sayfa klip içine girelim. Layer 1 üzerinde yazımız olduğuna göre layer 1 adını yazı yapalım. Yeni layer ekleyelim layer adı resimler olsun. Ekleyeceğimiz resimleri import edelim resimler örnek resimdeki şekilde ekleyelim.
photoders
Tekrar yazı aracını seçip yazı yazalım. Hemen altına resimler layerine geçerek resimler ekliyoruz. Yazı aracını seçip tekrar yazı yazalım. Örnek resim inceleyelim.
photoders
7-Scene1 ana sayfaya gelelim. Layer 1 adını sayfa olarak değişelim. Sayfa seçili durumda instance name kutusuna photoders_sayfa yazalım.
8-Yeni layer ekleyelim layer adını scrollbar yapalım. Kütüphaneden scrollbar klip alarak yerleştirelim seçili durumda instance name kutusuna photoders_scroll yazıyoruz. Scrollbar layeri alta kaydıralım.
photoders
9-Yeni layer ekleyelim layer adı border olsun çalışmamızın etrafına çerçeve oluşturmuş olalalım border layeri en alta kaydıralım.
photoders
10-Çerçeve içinde yazımızın görüneceği alana rectangle tool aracı iç,i dolu dış çizgisi olmayan bir şekil oluşturalım seçili durumda klip yapalım. Name kutusuna sayfa alani yazalım. Layer adında sayfa alanı olarak değişelim. Klip seçili durumda instance name kutusuna sayfa_alani yazalım.
photoders
11-Yaptığımız sayfa alanı klip görünmez yapalım alt sayfamızı görelim görerek çalışalım istersek Layer üzerinde bululan Show All Layers as Outlines kutusuna tıklamamız yeterli olur. Çalışmanın çalışması ile bir alakası yoktur sadece bizim kapalı alanı görmemizi sağlar.
photoders
12-Yeni layer ekleyelim layer adı action olsun ekli kodu ekleyelim.

photoders_scroll.scrolling("photoders_sayfa", "sayfa_alani", 0.35);//0.35 scrol barın kayma hızını ayarlıyoruz.

Çalışmayı test edebiliriz artık CTRL+Enter

FLA indir

]]>
http://www.photoders.com/actionscript-scrollbar-3-0/feed 3
ActionScript 3.0 preloader (loading) http://www.photoders.com/actionscript-3-0-preloader-loading http://www.photoders.com/actionscript-3-0-preloader-loading#comments Fri, 14 Jan 2011 20:41:08 +0000 admin http://www.photoders.com/?p=2009 photodersFlash çalışmamızda AS 3 preloader yapacağız ilk olarak yeni bir sayfa açalım sayfamızı Actionscript 3.0′ı seçerek açalım.
1-layer 1 layerin 1.framesinde rectangle tool aracı ile 200x5px dikdörtgen oluşturalım içi dolu dış çizgisi olmasın.
Sahnedeki dikdörtgeni seçili movie clip yapalım name olarak bar yazalım instance name kutusuna bar_mc yazalım.

2-Şimdi dynamic text oluşturalım instance name kutusuna yuklenen_txt yazalım.
3-2.frameye keyframe ekleyip tasarladığımız çalışmayı ekleyebiliriz ben bir adet resim ekliyorum.
4-Yeni layer ekleyelim 1.framede actions paneli açalım F9 ekli kodları ekleyelim.

addEventListener(Event.ENTER_FRAME , yuk);
function yuk(evt:Event):void{

var topByte:Number = stage.loaderInfo.bytesTotal;
var yukByte:Number = stage.loaderInfo.bytesLoaded;
var toplam:Number = Math.floor(yukByte / topByte * 100);
if(yukByte==topByte){
removeEventListener(Event.ENTER_FRAME , yuk);
play();
}
else{
stop();
yuklenen_txt.text = toplam + "%";
bar_mc.width = toplam;
}
}

5-Layer 2 2.frameye keyframe ekleyelim actions paneli açıp stop(); ekleyelim.

Çalışmayı test edelim.
control>test movie (Ctrl+Enter)
Açılan controlden View >simulate download seçersek daha iyi anlamış oluruz.
FLA İndir

]]>
http://www.photoders.com/actionscript-3-0-preloader-loading/feed 0
Daktilo Yazı Efekti AS 3.0 http://www.photoders.com/daktilo-yazi-efekti-as-3-0 http://www.photoders.com/daktilo-yazi-efekti-as-3-0#comments Thu, 13 Jan 2011 22:15:27 +0000 admin http://www.photoders.com/?p=2006 photodersFlash çalışmamızda daktilo sesi efekti ekleyerek yazı yazdırma işlemini nasıl yapacağız size anlatmaya çalışacağım. Çalışmamıza başlayalım
1-İlk olarak çalışmamızda kullanacağımız ses dosyasını kütüphaneye import edelim. Kütüphanedeki ses dosyamıza sağ klik yapalım açılan pencereden properties seçeneğini seçelim Export for ActionScript kutusunu seçili yapıp Class kutusuna music yazalım.

photoders
2-Yazı alanımızı oluşturmak için dynamic text oluşturalım instance name kutusuna yazimiz_txt yazalım. Layer 1 adını yazı olarak belirleyelim
3-Yazı layer 1.framede actions penceresini açarak ekli kodu ekleyelim.

var ses:music = new music();//ses dosyası oluşturalım.
ses.play(0,15);//ses çalma fonksiyonu.
var i:Number = 0;//timer değişkeni oluşturalım değer 0.
var yaz:String = "Merhaba Photoders sitesi photoshop ve flash derslerin türkçe paylaşımak amaclı kurulmuş web sitesidir. Sitede mevcut dersler tamamen ücretsizdir. Ziyaretciler üye olmadan siteyi gezebilir yararlanabilirler, destek alabilmek sorunlarını iletebilmek için tek yapmaları gereken kısa bir zaman ayırarak ücretsiz üye olmalarıdır. Site içinde eklenmiş derslere yorum ekleyerek verilen emeklere saygı göstermek olduğu unutulmamalıdır.";
var timer:Timer = new Timer(100);//timer nesesi oluşturalım.
timer.addEventListener(TimerEvent.TIMER,timerplay) ;//timer eventi aktif ediyoruz.
function timerplay(evt:TimerEvent):void //eventine timer basla Function ile yapacağımız işlemi belirliyoruz.
{
	i++;//tanımladığımız değişkeni timer içinde çoğaltıyoruz.
	var harfler:String = yaz.substring(0,i);
	yazimiz_txt.text = harfler;
		if (i == yaz.length)
	{
		timer.stop();//timer nesesini stop ediyoruz
		SoundMixer.stopAll();//sesi stop ediyoruz
	}

}timer.start();

4-Çalışmamızı test edelim

FLA İndir

]]>
http://www.photoders.com/daktilo-yazi-efekti-as-3-0/feed 0
Mouse Efekti Yapalım-AS3 http://www.photoders.com/mouse-efekti-yapalim-as3 http://www.photoders.com/mouse-efekti-yapalim-as3#comments Mon, 24 May 2010 19:28:19 +0000 admin http://www.photoders.com/?p=1921 photoders
Çalışmamızda Mouse etrafında dağılan daireler yapacağız ilk olarak Actionscript 3.0 çalışma sayfası açalım renk olarak koyu renkler seçebiliriz çalışmada siyah arka renk seçimi uyguladım.

1-Dağılan daireleri yapalım daire yerine yıldız yapalım hazırlamak için PolyStar Tool aracını seçelim Style penceresinden star seçimini yapalım köşe sayısını 8 olarak belirledim yıldızın içini beyaz renk olarak belirleyelim.
photoders
2-Yıldızı movie clip yapalım F8 name kısmına Star_mc yazalım. Linkage kutusunu aktif edelim Export For ActionScript kutusunu seçili yaptığımızda Class penceresinde klip adımız beilirecektir. Bu uygulamayı yapma nedenimiz Star_mc klipimize ActionScript kodlarımızın içinden ulaşmak olacaktır.
photoders
3-Şimdi kodları ekleyelim layer1 1.framede actions paneli açalım F9 ekli kodları ekleyelim.

var star_mc:Star_mc;

var cTrans:ColorTransform=new ColorTransform();

stage.addEventListener(MouseEvent.MOUSE_MOVE, gezdir);

function gezdir(p:MouseEvent) {
	star_mc=new Star_mc();

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

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

	star_mc.addEventListener(Event.ENTER_FRAME, klip);
}

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

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

4-Çalışmamızı test edelim Star_mc klipi istediğimiz ölçüde küçültebiliriz bu işlem için Transform aracı kullanabiliriz.

FLA İndir

]]>
http://www.photoders.com/mouse-efekti-yapalim-as3/feed 11
Snow Kar Efekti AS3 http://www.photoders.com/snow-kar-efekti-as3 http://www.photoders.com/snow-kar-efekti-as3#comments Mon, 04 Jan 2010 14:50:26 +0000 admin http://www.photoders.com/?p=1835 Flash kar efekti çalışmamızda AS-3 kodlama ile efektimizi yapacağız sitemizde olsun istedim umarım faydalı olur ilk olarak yeni bir çalışma sayfası açalım. Oval Tool aracı ile dış çizgisi olmayan bir daire oluşturalım 4×4 px olsun.
1-Daire seçili F8 movie clip yapalım name Kar olsun.


photoders
2-Kar klip secili tekrar F8 Movie Clip yapalım name kar_mc olsun kar_mc içine girelim sahnedeki Kar klipi biraz yana kaydıralım Rectangle Tool aracı ile bir dikdörtgen oluşturalım sadece dış çizgisi olacak unutmayalım properties panelden sahnemizin değerleri kadar W ve H değerleri girersek daha kolay olur.
photoders
3-Dikdörtgen secili durumda Drawing Object yapalım Menüden Modify>Combine Objects>Union seçeneğini kullanalım. Properties panelden çizgilerin alpa değerini 0 yapalım ekli resimlerde iki uygulamayı ekledim.
photoders
4-Kar klipi şimdi hazırladığımız çerçevenin kenarına ayarlayalım. Örnek resim.
photoders
5-Layer1 çerçevemiz ve Kar klipi ekledik aynı framede sağ klik actions paneli açarak ekli kodu ekleyelim.

var kar:Array = new Array();
var karPrs:Dictionary= new Dictionary(true);
var max_karsize:Number = .04;
// pixels
var kartane:Number = 150;
var oheight:Number;
var owidth:Number;
init();
function init():void {

	owidth = width;
	oheight = height;
	// quantity
	for (var i:int=0; i<kartane; i++) {

		var t:MovieClip = new Kar();//
		t.name = "kar"+i;

		t.alpha = 20+Math.random()*60;
		t.x = -(owidth/2)+Math.random()*(1.5*owidth);
		t.y = -(oheight/2)+Math.random()*(1.5*oheight);
		t.scaleX = t.scaleY=.5+Math.random()*(max_karsize*10);
		var o:Object = new Object();
		o.k = 1+Math.random()*2;
		o.wind = -1.5+Math.random()*(1.4*3);

		karPrs[t] = o;

		addChild(t);
		kar.push(t);
	}
	addEventListener(Event.ENTER_FRAME, karMov);
}
function taneUp():void{
	for (var i:int=0; i<kar.length; i++) {
		var t:MovieClip = kar[i] as MovieClip;
		t.x = -(owidth/2)+Math.random()*(1.5*owidth);
		t.y = -(oheight/2)+Math.random()*(1.5*oheight);
	}
}
function karMov(evt:Event):void {
	var dO:MovieClip;
	var o :Object;
	if(visible && parent.visible){
	for (var i:int = 0; i < kar.length; i++) {
		dO = kar[i] as MovieClip;
		o = karPrs[dO];
		dO.y += o.k;
		dO.x += o.wind;
		if (dO.y>oheight+10) {

			dO.y = -20;

		}
		if (dO.x>owidth+20) {

			dO.x = -(owidth/2)+Math.random()*(1.5*owidth);
			dO.y = -20;

		} else if (dO.x<-20) {

			dO.x= -(owidth/2)+Math.random()*(1.5*owidth);
			dO.y = -20;
		}

	}
	}
}

6-Scene 1 sahnemize gelelim Kütüphanede (Library) Kar klip üzerinde sağ klik Linkage seçeneğini seçelim açılan panelde Class penceresine Kar yazalım.
photoders
7-Kütüphaneden kar_mc sahnemize alalım instance name penceresine kar_mc yazalım.
photoders
8-Çalışmamızı test edelim.

FLA İndir

]]>
http://www.photoders.com/snow-kar-efekti-as3/feed 2
Flash Blur Preloader ActionScript 3.0 http://www.photoders.com/flash-blur-preloader-actionscript-3-0 http://www.photoders.com/flash-blur-preloader-actionscript-3-0#comments Fri, 04 Dec 2009 19:58:48 +0000 admin http://www.photoders.com/?p=1823 photodersFlash AS 3.0 Plerloader çalışmamızda blur,drop,glow efekti uygulayacağız. Sitede benzer çalışmalar olmasına rağmen tekrardan bir ders işlemek istedim. İlk olarak yeni bir çalışma sayfası açalım sayfamızın px değeri size kalmış kendi çalışmanıza göre uyarlayabilirsiniz.

 

 
photoders
2-Rectangle Tool aracı ile bir dikdörtgen oluşturalım dış çizgisi olmasın F8 movie clip yapalım name loader olsun.
photoders
3-Layer1 adını değişelim loader_bar olsun efekt vermek için properties panelden filters penceresini açalım drop,blur,glow efektleri verelim. İnstance name penceresine load_mc yazalım.
photoders
4-Yeni layer ekleyelim layer adı yazı olsun Text Tool aracı ile dynamic text oluşturalım. İnstance name penceresine load_txt yazalım.
photoders
5-Yeni layer ekleyelim layer adı sayfa olsun 1.frameyi boş bırakıp 2.frameye keyframe ekleyelim loading sonunda açılacak olan resmi ekleyelim.
6-Yeni layer ekleyelim layer adı action olsun 1.framede action penceresini açalım F9 ekli kodu ekleyelim.

//flash loader uygulama kodları www.photoders.com
stop();

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onProgress(e:ProgressEvent):void
{
	var loaded:Number = e.target.bytesLoaded;
	var total:Number = e.target.bytesTotal;
	var pct:Number = loaded/total;
	load_mc.scaleX = pct;
	load_txt.text =(Math.round(pct * 100)) + "%";
}

function onComplete(e:Event):void
{
	nextFrame();
}

7-Çalışmamızı test edelim Ctrl+Enter
Çalışmayı tekrar,tekrar izlemek için test sayfası açık durumda view>simulate download veya Ctrl+Enter yaparak tekrar izleyebilirsiniz.

 

]]>
http://www.photoders.com/flash-blur-preloader-actionscript-3-0/feed 8
Flash Dijital Saat Yapalım AS.3 http://www.photoders.com/flash-dijital-saat-yapalim-as-3 http://www.photoders.com/flash-dijital-saat-yapalim-as-3#comments Thu, 03 Dec 2009 21:24:24 +0000 admin http://www.photoders.com/?p=1819 photodersFlash çalışmamızda ActionScript dijital saat yapacağız çalışmamıza glow efekt uygulayacağız çalışmamız yeni çalışma sayfası açalım Flash Sayfamız ActionScript 3.0 oluyor.

 

 
photoders
2-Arka plan beyaz olsun px değerleri size kalmış ilk olarak layer1 üzerinde rectangle tool aracı ile sahnemizin büyüklüğünde bir dikdörtgen hazırlayalım gradient uygulayalım. Arka alan oluşturmuş olacağız. Layer adını saat glow yapalım.
photoders
3-Text Tool aracı ile dynamic text seçimi yaparak yazımızı yazalım instance name kısmına clockGlow yazalım. Sahnedeki yazıyı kopya yapalım.
photoders
4-Yeni layer ekleyelim layer adını zaman olarak değişelim kopya yaptığımız yazıyı paste ederek sahneye ekleyelim instance name penceresindeki yazımyı değişip clock yazalım.
photoders
5-SaatGlow layeri seçelim properties panelden Filters Glow uygulayalım.
photoders
6-Ana sahnemizde Properties panelde Publish panelde Class penceresine temeli yazalım hazırlayacağımız ActionScript dosyamızın adı olacak.
photoders
7-File>New ActionScript File açalım.
photoders
8-Açılan action penceresine kodlarımızı ekleyip farklı kaydet dosya ismi olarak temeli olarak isimlendirelim.

/* saat temeli */
package {
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.TimerEvent;

	public class temeli extends MovieClip {
		/* değişken */

		var date:Date=new Date  ;

		var day:int=date.day;

		var hours:int=date.hours;
		var minutes:* =date.minutes;
		var seconds:* =date.seconds;

		var timer:Timer=new Timer(1000);

		public function temeli():void {

			updateClock();

			timer.addEventListener(TimerEvent.TIMER,startClock);
			timer.start();
		}

		/* Clock function */

		private function updateClock():void {

			/* 24 saat gösterge */

			if (String(minutes).length<2) {
				minutes="0"+minutes;
			}

			if (String(seconds).length<2) {
				seconds="0"+seconds;
			}

			/* Set Text  */

			clock.text=hours+":"+minutes+":"+seconds;
			clockGlow.text=hours+":"+minutes+":"+seconds;
		}

		private function hideObjects(... targets) {
			for (var i:int=0; i<targets.length; i++) {
				targets[i].visible=false;
			}
		}

		/* Start Clock function */

		private function startClock(e:TimerEvent):void {
			date=new Date  ;

			hours=date.hours;
			minutes=date.minutes;
			seconds=date.seconds;

			updateClock();
		}
	}
}

8-Çalışmamızı test edelim.

]]>
http://www.photoders.com/flash-dijital-saat-yapalim-as-3/feed 0
AS3 Link Verme http://www.photoders.com/as3-link-verme http://www.photoders.com/as3-link-verme#comments Tue, 03 Nov 2009 11:17:46 +0000 admin http://www.photoders.com/?p=1793 photodersFlash versiyonları değişince Actionscript link (Url ) vermedeki farklılıkları bu dersimizde örnekler ile göreceğiz. Flash çalışma sayfamızı açalım.

 

Kısa bir bilgi actionscript2 ile kod verirken alışılan GetURL AS3 ile değişerek NavigateURL yapıyoruz örneklerde görebilirsiniz.
1-İlk olarak sürümler link vermek için kullanılan kodları görelim Actionscript 2.0:

getURL(“http://www.photoders.com”, “_blank”):

2-Actionscript 3.0:

var url:URLRequest = new URLRequest(“http://www.photoders.com”);
navigateToURL(url, “_blank”);

AS3 Resim (Klip) üzerine Link vermeyi görelim.
1-Yeni bir çalışma sayfası oluşturalım bir resim import edelim. File >Import>Import to Stage.
2- Resmi Convert to symbol (F8) Button yapalım name photoders_btn yapalım klip seçili instance name kutusuna photoders_btn yazalım.
photoders
3-Gelelim Kod ekleme işlemine yeni layer ekleyelim layer adını action yapalım birinci framede actions paneli açalım ekli kodu ekleyelim.

//1.Buton aktif yapıyoruz
photoders_btn.addEventListener(MouseEvent.CLICK, openurl);

//2.Url adresi.
function openurl(event:MouseEvent):void {
var url:URLRequest = new URLRequest("http://www.photoders.com");
navigateToURL(url, "_blank");
}

Ekli kodlardaki linkleri değişmeyi unutmayın.
4-Test edelim Ctrl+Enter

FLA İndir

]]>
http://www.photoders.com/as3-link-verme/feed 13
Duvar Kağıdı Animasyon AS3 http://www.photoders.com/duvar-kagidi-animasyon-as3 http://www.photoders.com/duvar-kagidi-animasyon-as3#comments Sun, 04 Oct 2009 10:33:21 +0000 admin http://www.photoders.com/?p=1764 photodersFlash çalışmamızda resim üzerinde Actions Script kod kullanarak mouse etkili animasyon uygulayacağız. İlk olarak çalışmamızda kullanacağımız resmimizi import edelim CTRL+R resmimizi movie clip yapalım F8 layer1 adını resim olarak isimlendirelim.

 

 

 

 
photodersl
2-Resim_mc klipi sahnemize ortalayalım bu işlemi Align paneli kullanarak kolayca yapabiliriz CTRL+K
photoders
3-Properties Paneli gelelim Instance name kutusuna resim_mc klipimizi yazalım.
4-Son olarak AS3 kodumuzu ekleyelim eklemek için resim layer 1.framesinde F9 actions paneli açalım ekli kodu ekleyelim.

var bevelSpeed:Number = 8;

resim_mc.addEventListener (MouseEvent.MOUSE_OVER, mouseOverresim_mc);

resim_mc.addEventListener (MouseEvent.MOUSE_OUT, mouseOutresim_mc);

resim_mc.addEventListener (Event.ENTER_FRAME, enterFrameresim_mc);

var bevelFilter:BevelFilter = new BevelFilter(10,
                                   45,
                                   0x14173a,
                                   1,
                                   0x79ac9d,
                                   1,
                                   0,
                                   0,
                                   0,
                                   BitmapFilterQuality.HIGH,
                                   BitmapFilterType.INNER,
                                   false);

resim_mc.filters = [bevelFilter];

var mouseIsOverresim_mc:Boolean = false;

function mouseOverresim_mc (event:MouseEvent):void {
mouseIsOverresim_mc = true;
}

function mouseOutresim_mc (event:MouseEvent):void {
mouseIsOverresim_mc = false;
}

function enterFrameresim_mc (event:Event):void {

if (mouseIsOverresim_mc == true && bevelFilter.blurX < 100) {
bevelFilter.blurX += bevelSpeed;
bevelFilter.blurY += bevelSpeed;

bevelFilter.strength = 5;
}

if (mouseIsOverresim_mc == false) {
bevelFilter.blurX -= bevelSpeed;
bevelFilter.blurY -= bevelSpeed;
}

if(bevelFilter.blurX == 0) {
bevelFilter.strength = 0;
}

resim_mc.filters = [bevelFilter];
}

5-Son olarak hızımızı belirleyelim frame rate 40 yaparak çalışmamızı deneyelim.
CTRL+ENTER

FLA İndir

]]>
http://www.photoders.com/duvar-kagidi-animasyon-as3/feed 5
Şelale Efekti Flash CS4 AS3.0 http://www.photoders.com/selale-akan-su-efekti-yapalim-flash-cs4actionscript-3-0 http://www.photoders.com/selale-akan-su-efekti-yapalim-flash-cs4actionscript-3-0#comments Tue, 07 Jul 2009 21:33:07 +0000 admin http://www.photoders.com/?p=1643 photodersFlash çalışmamızda akan şelale yapacağız çalışmada actionscript 3.0 kod uygulayacağız. Çalışmamızda kullandığım resim eklendi resim üzerinde akan suyun olduğu kısmı çıkartmanız gerekecek bu işlemi photoshop ile yapabilirsiniz uğraşmak istemem derseniz sizin için hazırladığım resmi ekledim. Yeni bir çalışma sayfası açalım.

 


1-Flash CS4 Create New Document ActionScript 3.0 yeni çalışma sayfası açalım.
photoders
2-İlk olarak photoshop ile resim üzerinden akan su kısmını laso tool aracı ile seçip çıkartıp png olarak kayıt edelim hazırladığımız resimleri import edelim. İmage1 ve İmage_2.png
photoders
Resim üzerinden çıkartıp PNG olarak düzenlediğim resim. İmage_2.png
photoders
3-Layer1 adını değişelim bg olarak yazalım image1 resmi kütüphaneden alarak 1.frameye ekleyelim Aling panelden sahneye ortalayalım sahnede resim seçili F8 movie clip yapalım name bg_mc olsun.
photoders
4-Yeni layer ekleyelim layer adı şelale olsun kütüphaneden İmage_2.png resmi 1.frameye ekleyelim aling panelden ortalayalım F8 movie clip yapalım name selale_mc olarak yazalım. Alt bg resme göre ortalayalım instance name olarak selale yazalım.
photoders
5-Yeni layer ekleyelim layer adı action olsun actions paneli açalım ekli kodları ekleyelim.

/** selale kod **/
var bn:BitmapData=new BitmapData(selale.width, selale.height);
var dp:DisplacementMapFilter = new DisplacementMapFilter(bn,new Point(0,0),1,2,5,10);

var p1:Point = new Point(0,0);
var p2:Point = new Point(0,0);
var selaleHız:Array = [p1, p1];

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void {

/*selale effect ayar */
selaleHız[0].y -=1;
selaleHız[1].x -=0.1;

bn.perlinNoise(20,10,1,99,true,false, 7,false,selaleHız);
selale.filters=[dp]

}

Çalışmayı test edelim Ctrl+Enter

FlA İndir

]]>
http://www.photoders.com/selale-akan-su-efekti-yapalim-flash-cs4actionscript-3-0/feed 22
Renk Paleti (Color Picker)Actionscript 3.0 http://www.photoders.com/renk-paleti-color-pickeractionscript-3-0 http://www.photoders.com/renk-paleti-color-pickeractionscript-3-0#comments Thu, 18 Jun 2009 19:26:34 +0000 admin http://www.photoders.com/?p=1613 photodersFlash çalışmamızda renk toplayıcı paleti oluşturacağız (ColorPicker) Flash Components panelinden colorpicker alarak ekleyeceğimiz actionscript kodlama uygulayarak çalışmamızı yapacağız. İlk olarak çalışma sayfası açalım benim tercihim 400×250 px oldu.

 


1-Çalışmada kullanmak için photoshop kullanarak transparent sayfa açtım bir resim hazırladım ağaç fırçalar kullanarak bir tasarım oluşturdum PNG kaydettim.
photoders
2-Hazırladığımız resmi import edelim sahnede resmi Aling panelden ortalayalım seçili durumda F8 movie clip yapalım name kısmına agac_mc yazalım layer1 adını değişelim ağaç yazalım. Sahnede agac_mc seçili instance name kısmına agac_mc yazalım.
photoders
3-Yeni layer ekleyelim layer adı bg olsun. Rectangle Tool aracı ile dış çizgisi olmayan bir dikdörtgen hazırlayalım renk siyah olsun ebat olarak açtığımız sayfa boyutunda olsun. Dikdörtgeni seçip F8 movie clip yapalım name bg_mc olsun instance name kısmına bg_mc yazalım. Ağaç layerinin altına alalım.
photoders
4-Yeni layer ekleyelim layer adını colorpicker yazalım. Window> Components panelini açalım. CoroPicker sahneye alalım.
photoders
5-Color Picker oluşturduğumuz layere resmimizin köşesine ekleyelim kütüphaneden tekrar alarak alt köşeye ekliyoruz biri arka plan renk değişimi için diğeri resmimizin renk değişimi için olacak. Tek, tek instance name kısımlarına resim üzerindeki isimleri verelim.
photoders
6-Yeni layer ekleyelim layer adını action layer yazalım. F9 actions paneli açalım. Ekli kodu ekleyelim.

import fl.events.ColorPickerEvent;

cpArka.colors = [0x000000,0xFFFFFF,0x000099,0x990000,0xFF6600,0xFFFF00,0x00FF00,
0x663300,0x9900CC];
cpArka.selectedColor = 0x000000;
cpArka.showTextField = false;

cpResim.colors = [0xFFFFFF,0x000000,0x000099,0x990000,0xFF6600,0xFFFF00,0x00FF00,
0x663300,0x9900CC];
cpResim.selectedColor = 0xFFFFFF;
cpResim.showTextField = false;

cpArka.addEventListener(ColorPickerEvent.CHANGE,changeColorArka);
cpResim.addEventListener(ColorPickerEvent.CHANGE,changeColorResim);

function changeColorArka(evt:ColorPickerEvent):void {
var newColorTransform:ColorTransform = bg_mc.transform.colorTransform;
newColorTransform.color = evt.color;
bg_mc.transform.colorTransform = newColorTransform;
}

function changeColorResim(evt:ColorPickerEvent):void {
var newColorTransform:ColorTransform = agac_mc.transform.colorTransform;
newColorTransform.color = evt.color;
agac_mc.transform.colorTransform = newColorTransform;
}

7-Çalışmamızı test edelim Ctrl+Enter
FLA İndir

]]>
http://www.photoders.com/renk-paleti-color-pickeractionscript-3-0/feed 2
Digital (Clock) Saat Actionscript 3.0 http://www.photoders.com/digital-clock-saat-actionscript-3-0 http://www.photoders.com/digital-clock-saat-actionscript-3-0#comments Tue, 16 Jun 2009 22:09:00 +0000 admin http://www.photoders.com/?p=1611 photodersFlash çalışmamızda actionscript 3.0 dijital saat hazırlayacağız. İlk olarak actionscript 3.0 çalışma sayfası açalım 450×200 px olsun background siyah olursa daha iyi olur. İlk olarak çalışmamızda kullanacağımız yazı fontunu buradan indirebilirsiniz.

 


1-Text Tool aracını seçelim Dynamic Text seçimini yapalım font olarak indirdiğimiz DS-Digital seçelim font size 96 olsun iki adet 00 yazalım instabce name penceresine saat_t yazalım.
photoders
2-Properties panelden filters seçelim sahnedeki saat_t dynamic text yazımıza glow efekti verelim.
photoders
3-Tekrar Dynamic Text yazı oluşturalım 00 yazıyoruz değerler diğer uygulamamın aynısı oluyor. İnstance name kısmına dakika_t yazalım.
4-Son kez Dynamic Text oluşturalım 00 yazalım değerler aynı oluyor. İnstance name kısmına saniye_t yazalım. Static Text yazı seçimini kullanarak : işaretini oluşturalım aralara yerleştirelim Glow efekti verelim.
photoders
5-Yeni layer ekleyelim layer adı action layer olsun F9 actions paneli açalım ekli kodu ekleyelim.

stage.addEventListener(Event.ENTER_FRAME,updateDate);

function updateDate(e:Event):void{
var date = new Date();

if (date.hours< 10){
saat_t.text = "0" + date.hours;
}
else {
saat_t.text = date.hours;
}

if (date.minutes< 10){
dakika_t.text = "0" + date.minutes;
}
else {
dakika_t.text = date.minutes;
}

if (date.seconds< 10){
saniye_t.text = "0" + date.seconds;
}
else {
saniye_t.text = date.seconds;
}
}

6-Çalışmamızı test edebiliriz daha ufak boyutlarda yaparak istediğiniz yerde kullanabilirsiniz.
Ctrl+Enter

FLA İndir

]]>
http://www.photoders.com/digital-clock-saat-actionscript-3-0/feed 4