photoders

İletişim Form ActionScript 3.0

admin — Mon, 14 Feb 2011 13:21:07 +0000

Ç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.

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.

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.

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.

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.

Butonlar üzerine yazı yazalım sol buton ilet sağ buton sil şeklinde olsun.

4 Yeni layer ekleyelim layer adı etiket olsun örnek resimde gördüğünüz şekilde yazı aracı ile static text yazı yazalım.

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

Bu Yazıyı Paylaşın

ActionScript Scrollbar 3.0

admin — Wed, 09 Feb 2011 19:29:33 +0000

Flash 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Bu Yazıyı Paylaşın

ActionScript 3.0 preloader (loading)

admin — Fri, 14 Jan 2011 20:41:08 +0000

Flash ç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

Bu Yazıyı Paylaşın

Daktilo Yazı Efekti AS 3.0

admin — Thu, 13 Jan 2011 22:15:27 +0000

Flash ç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.

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

Bu Yazıyı Paylaşın

Dönen Yazı Efekti

admin — Thu, 09 Dec 2010 10:36:19 +0000

Flash dersimizde dönen yazı efekti uygulamasını yapacağız. İlk olarak yeni bir çalışma sayfası açalım benim sayfa boyutum 380X120 px oldu siz kendi çalışmanıza göre ayarlayabilirsiniz.
1.İlk olarak Text Tool aracı ile yazımızı yazalım. Yazımızı parçalayalım Ctrl+B (Break Apart)

2.Yazı sahnede seçili durumda Modify>Timeline>Distribute to Layers (Ctrl+Shift+D) uygulayarak yazımızı tek,tek harf olarak ayrı, ayrı layer yapalım.

3.İlk olarak en üst harf layerimize gelelim 5 frameye key ekleyelim F6 1 ve 5 frame arasına Motion uygulayalım properties panelden Rotate penceresinden CW seçimini yapalım.

4.İkinci hargimiz h harfinin olduğu layere gelelim 3 frameye key ekleyelim F6 8 frameye key ekeleyelim 3 ile 8 frame arasına motion verelim properties panele tekrar gelelim Rotate penceresinden CW uygulayalım.

5-Sıra ile diğer harflere uygulayalım o harf layerine gelelim bu sefer ilk olarak 5 frameye key ekliyoruz başlangıç noktamız bir üst layerin ilk başlama noktasından 2 frame ilerisine key ekleyip animasyon için 5 frame daha ilave ederek işlemleri yaptığımız ilk harflerde olduğu şekilde devam ediyoruz. Örnek resmi inceleyebilirsiniz.

6.Son harfin son framesi 22 frameye denk geldi şimdi diğer layerlerin 22 framelere key ekleyelim F5

En alt layerimizi istersek kullanabiliriz herhangi bir resim vs olabilir. Son olarak hız ayarı yapalım fps frame rate kutusuna 25 yazalım yeterli gelmez ise değişebilirsiniz.
Çalışmayı test edelim.

FLA İndir

Bu Yazıyı Paylaşın

XML Galeri Kayan Resim Show

admin — Mon, 29 Nov 2010 17:38:17 +0000

Flash çalışmamızda verileri XML dosyasından alan kullanışlı flash galeri uygulaması yapacağız. İlk olarak kendimize uygun resimler hazırlayalım benim çalışmada kullandığım resimleri 430X300 px olarak hazırladım. Çalışmamıza başlayalım ilk olarak yeni bir çalışma sayfası açalım açtığımız sayfayı isterseniz resimlerin değerinde açabiliriz ben biraz büyük değerde açtım (450X320 px) bunu yapmamdaki neden resimlerin altında gölge efekti vermek olacak.

1-Scene1 sahnemizde rectangle tool aracı ile resim ölçüsünde bir dikdörtgen oluşturalım dış çizgisi olması renk olarak (#666666) seçelim. Hazırladığımız diktörtgen seçili movie clip yapalım name olarak resimler_mc yazalım. Layer1 adını resim-bg yazalım.

2-Properties panelden filters Drop Shadow verelim resimlerin altında gölge efekti olsun.

3-Sahnede resimler_mc klip seçili instance name kutusuna resimler yazalım.

4-İleri ve geri olarak kullanacağımız butonu hazırlayalım tek buton yeterli. Flash buton hazırlamayı bildiğinizi varsayıyorum isterseniz site içinde buton hazırlamayı öğrenebilirsiniz.
5-Buton hazırladık resim-bg layer üzerinde kütüphaneden hazırladığımız butonu sahneye taşıyalım iki buton olacağı için tekrar alalım biri ileri buton diğeri ise geri buton olacak aynı yönde olduğu için Rotate aracı ile butonun birini çevirelim sahnede istediğimiz yere ayarlayabiliriz.
İleri butonu seçili yapalım instance name kutusuna ileri yazalım. Geri butonu seçili yapalım instance name kutusuna geri yazalım.

6-Resimlerimiz için açıklama yazı hazırlayalım.Dynamic text aracı ile text yeri hazırlayalım instance name kutusuna baslik yazalım.

7-Yeni layer ekleyelim layer adı action olsun ekli kodları actions paneli açarak ekleyelim.

var x:XML = new XML();
x.ignoreWhite = true;

var urls:Array = new Array();
var bilgi:Array = new Array();
var whoIsOn:Number;

x.onLoad = function(success) {
	var photos:Array = this.firstChild.childNodes;
	for(i=0;i 0) {
		whoIsOn--;
		resimler.loadMovie(urls[whoIsOn]);
		baslik.text = bilgi[whoIsOn];
	}
}

ileri.onRelease = function() {
	if(whoIsOn < urls.length-1) {
		whoIsOn++;
	    resimler.loadMovie(urls[whoIsOn]);
	    baslik.text = bilgi[whoIsOn];
	}
}

8-Geldik XML dosyamızı hazırlamaya Notepad editörü açıp hazırlayabiliriz.

XML dosya adını image olarak isimlendirip kayıt edelim. Kod içinde (x.load(“image.xml”);) olarak belirlemiştik.
9-hazırladığımız resimleri img isimli klasör içine ekleyelim sıralamayı resim1,resim2 şeklinde sıralayalım XML dosyasını inceleyebilirsiniz.
Çalışmayı test edelim.

FLA İNDİR

Bu Yazıyı Paylaşın

200 Adet Photoshop Gradient

admin — Wed, 24 Nov 2010 10:42:00 +0000

200 Adet Hazır Photoshop Gradient Hazır Set

GRD | 15.8 MB
Buradan
ve
Buradan

Bu Yazıyı Paylaşın

XML Playlist Müzik Player

admin — Thu, 16 Sep 2010 12:19:56 +0000

Flash dersimizde müzik player hazırlayacağız. XML dosya içinden müzik dosyalarını çalıştıracağız güzel bir uygulama olacak sanıyorum. Çalışmamıza başlamak için hazırladığım arka plan resmine uygun bir çalışma sayfası açalım. Web sitelerinde rahatlıkla kullanabilirsiniz.

1.Adım
İlk olarak resmimizi import edelim. Ekli resimleri ekli dosyadan indirip bire, bir kullanabilirsiniz.

Resmi sahnede seçili durumda Symbol yapalım F8 layer1 adını bg olarak isimlendirelim. Layeri kilitleyelim.
2.Adım
Yeni layer ekleyelim layer adı volume bar olsun yani ses ayarını yapmak için bar çubuğu yapacağız. Alt resimde görülen yeşil çubuğun üzerine gelecek şekilde dikdörtgen oluşturalım seçili durumda Symbol yapalım name olarak vol_symbol2 yazalım. Seçili durumdaki barı şimdi movie clip yapalım name vol_symbol2_mc yazalım. Klipi seçili durumda tekrar movie klip yapalım name vol_bar olsun vol_bar klip içine girelim layer1 adını bar olarak değişelim sahnede bar seçili instance name kutusuna sesbg yazalım.

Yeni layer ekleyelim ses ayar çubuğu yapalım layer adını ses yapalım sahneye uygun bir dikdörtgen oluşturalım seçili durumda F8 symbol yapalım name olarak ses_symbol1 yazıp seçili durumda klip yapalım name ses_symbol1_mc yazalım sahnede vol_bar klip içindeyken ses_symbol1_mc klipi sahnede seçili yapalım instance name kutusuna surgu yazalım volum çubuğumuzu hazırlamış olduk. Bar layere gelelim sahnede barı seçip color advanced penceresinden Alpa değerini %25 yapalım.

Scene1 sahnemizde vol_bar klipi seçili yapalım instance name kutusuna ses1 yazalım layeri kilitleyebiliriz.

3.Adım
Yeni layer ekleyelim layer adı loader olsun şimdi XML dosyamızdan çalacağımız parçayı yükleyeceğimiz loader hazırlayacağız. İlk olarak rectangle tool aracı ile dış çizgisi olmayan bir dikdörtgen oluşturalım W.168 H.2 px olsun volum barın hemen üstünde olacak sahnedeki nesneyi seçelim F8 symbol yapalım name loader_symbol1 olsun tekrar sahnedeki symbol seçili klip yapalım name loader_klip yazalım loader_klip içine girelim. sahnedeki nesnenin renk tonunu color Advanced penceresinden Alpa değerini %0 yapalım amacımız boş çerçeve olarak görünmesidir.

Yeni layer ekleyelim yani layer2 oluyor. Sahneye rectangle tool aracı ile bir dikdörtgen çizelim dış çizgisi olması dolgu renk mavi olabilir W.168 H.2 px olsun seçili durumda symbol yapalım name loader_symbol2 yazalım.

Nesne seçili durumda movie clip yapalım name loader_mc olsun.Loader klip içine girelim loader_mc klipi sahnede küçültelim W.1 H2 px olarak ayarlayalım. İnstance name kutusuna yuklebar yazalım. Resmi inceleyebilirsiniz.

Scene1 sahnemizde loader layerseçelim sahnedeki klipimiz seçili instance name kutusuna yukle yazalım.

Adım.4
Yeni layer ekleyelim loader üzerinde müziğin başlamasını sağlayalım rectangle tool aracı ile dış çizg,isi olmayan bir kare oluşturalım W.4 H.4 px olsun dolgu renk olarak gradient siyah beyaz uygulayalım. Seçili durumda symbol yapalım name symbol_basla yazıp devamında movie clip yapalım name symbol_basla_mc olsun. Scene1 gelelim layer adını basla yapalım sahnedeki basla_mc klip seçili instance name kutusuna basla yazalım. Örnek resim resimde gördüğünüz gibi loader klipi olulşturduğumuzda advanced değerini 0 yaptığımızdan loader layerdeki klip boş görünmekte işte bizde basla klipi başlangıç noktasına ayarlayalım.

5.Adım
Geldik butonları hazırlamaya arka plan olarak hazırladığım resim üzerinde gördüğünüz play,stop,geri,ileri kısımları tek, tek resim olarak hazırladım buton olduğundan Up kısmında arka plan resminde gördüğünüz şekilde hazırladım Over,Down,Hit kısımlarında farklı olması için biraz değişik hazırladım şimdi hazırladıklarımı örnek resim olarak ekleyeyim inceleyin.
Up alanındaki görünümler.

Dovn,Over,Hit alanındaki görünümler.

Resimleri sizlere ekli dosya içinede bulabilirsiniz.
6.Adım
Scene1 sahnemizde yeni layer ekleyelim layer adı play_btn olsun play yazılı resmi arka plan resmi üzerine ayarlayalım seçili durumda symbol yapalım name Symbol_play (up) olsun seçili durumda F8 button yapalım name play_buton olsun Up kısmındaki görünüm ekli durumda over alanına keyframe ekleyip kenarlarında siyah çerçeve olan play yazılı resmi ekleyelim sahnede gerekli ayarlamayı yapınca F8 symbol yapalım name Symbol_play(over-down-hit) olsun down alanını yaptık over ve hit alanıda aynı olacak keyframe eklememiz yeterli olacaktır.
Scene1 sahemize gelelim sahnede play_buton seçili instance name kutusuna play_buton yazalım.

7.Adım
Yeni layer ekleyelim layer adı stop_btn olsun Play butonu hazırlarken ne yaptıysak aynısını yapalım resimlerimiz zaten butonumuz tamamlanınca scene1 sahnemizde sahnedeki buton seçili olsun instance name kutusuna stop_buton yazlım.
Aynı işlemleri yeni layerler ekleyerek geri ve ileri butonlarımız içinde yapalım instance name kutularına geri buton için geri_buton yazlım ileri buton için ileri_buton yazalım. Butonları böylece tamamladık.

8.Adım
Yeni layer ekleyelim layer adı zaman olsun çalan müziğin süresini belirleyelim dynamic text yazı olarak 00:00 yazalım instance name kutusuna sure_txt yazalım.
Yeni layer ekleyelim layer adı sanatcı band olsun dynamic text oluşturalım yazı yazmayalım instance name kutusuna band_txt yazıyoruz.

Yeni layer ekleyelim layer adı title yazı olsun dynamic text aracı ile sahnede hemen band_txt altına yeni text alanı oluşturalım yazı olmasın instance name kutusuna acıklama_txt yazalım.

Adım.9
Çalışmamız genel olarak tamamlandı ben band kısmı farklı görünsün diye efekt uyguladım biraz renk değişimi oldu. İsterseniz sizde yaprsınız.
Yeni layer ekleyelim layer adı action olsun ekli kodları actions paneli açarak ekleyelim.

function timer(sound_obj)
{
    time = sound_obj.position / 1000;
    min = Math.floor(time / 60);
    min = min < 10 ? ("0" + min) : (min);
    sec = Math.floor(time % 60);
    sec = sec < 10 ? ("0" + sec) : (sec);
    sure_txt.text = min + ":" + sec;
}
function soundStatus()
{
    var _loc2 = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal();
    _root.yukle.yuklebar._width = _loc2 * 168;
    duration = _root.sound_mc.sound_obj.duration;
    position = _root.sound_mc.sound_obj.position;
    _root.basla._x = position / duration * 165 + 6;
}
stop ();
playlist = new XML();
playlist.ignoreWhite = true;
playlist.onLoad = function (success)
{
    if (success)
    {
        _global.songname = [];
        _global.songband = [];
        _global.songfile = [];
        for (var _loc3 = 0; _loc3 < playlist.firstChild.childNodes.length; ++_loc3)
        {
            _global.songname[_loc3] = playlist.firstChild.childNodes[_loc3].attributes.name;
            _global.songband[_loc3] = playlist.firstChild.childNodes[_loc3].attributes.band;
            _global.songfile[_loc3] = playlist.firstChild.childNodes[_loc3].attributes.file;
        }
    }
    _root.createEmptyMovieClip("sound_mc", 1);
    _global.song_nr = random(songfile.length);
};
MovieClip.prototype.songStarter = function (file, name, band)
{
    if (this.sound_obj)
    {
        this.sound_obj.stop();
        delete this.sound_obj;
    }
    this.sound_obj = new Sound(this);
    this.sound_obj.loadSound(file, true);
    this.onEnterFrame = function ()
    {
        if (this.sound_obj.position > 0)
        {
            delete this.onEnterFrame;
            this._parent.acıklama_txt.text = "\'" + name + "\'";
            this._parent.band_txt.text = band;
            this._parent.sure_txt.text = "00:00";
            timeInterval = setInterval(timer, 1000, this.sound_obj);
        }
        else
        {
            this._parent.band_txt.text = "Loading...";
        }
    };
    this.sound_obj.onSoundComplete = function ()
    {
        clearInterval(timeInterval);
        this._parent.sure_txt.text = "00:00";
        song_nr == songfile.length - 1 ? (_global.song_nr = 0) : (_global.song_nr++);
        _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
    };
    this._parent.ses1.surgu.onPress = function ()
    {
        startDrag (this, true, 1, this._y, this._parent.sesbg._width - 10, this._y);
        this.onEnterFrame = function ()
        {
            var _loc2 = this._x / this._parent.sesbg._width * 100;
            this._parent._parent.sound_mc.sound_obj.setVolume(_loc2);
        };
    };
    this._parent.ses1.surgu.onRelease = function ()
    {
        delete this.onEnterFrame;
        stopDrag ();
    };
    this._parent.ses1.surgu.onReleaseOutside = function ()
    {
        stopDrag ();
    };
};
setInterval(soundStatus, 100);
play_buton.onRelease = function ()
{
    clearInterval(timeInterval);
    this._parent.sure_txt.text = "00:00";
    _root.basla._x = 7;
    this._parent.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
stop_buton.onRelease = function ()
{
    clearInterval(timeInterval);
    _root.basla._x = 7;
    this._parent.sure_txt.text = "00:00";
    this._parent.acıklama_txt.text = "";
    this._parent.band_txt.text = "";
    this._parent.sound_mc.sound_obj.stop();
};
ileri_buton.onRelease = function ()
{
    clearInterval(timeInterval);
    _root.basla._x = 7;
    this._parent.band_txt.text = "loading...";
    this._parent.sure_txt.text = "00:00";
    song_nr == songfile.length - 1 ? (_global.song_nr = 0) : (_global.song_nr++);
    _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
geri_buton.onRelease = function ()
{
    clearInterval(timeInterval);
    _root.basla._x = 7;
    this._parent.band_txt.text = "loading...";
    this._parent.sure_txt.text = "00:00";
    song_nr == 0 ? (_global.song_nr = songfile.length - 1) : (_global.song_nr--);
    _root.sound_mc.songStarter(songfile[song_nr], songname[song_nr], songband[song_nr]);
};
playlist.load("/music_player/playlist.xml");

Adım.10
Bize bir XML dosyası gerekli onun hazırlamak için ekli metni kendinize göre uyarlayın.

Çalışmamız sona erdi çalışması için music_player klasörü hazırlayıp içine mp3 dosyaları ve playlist.xml dosyası ile player.swf dosyamızı bir arada dizinimiz ekliyoruz artık web sayfamızda görünmesi sağlayacağız gerekli kodu görünmesini istediğimiz yere eklediğimizde işlem tamamlanmış olacaktır.

FLA+XML+Resimleri İndir

Bu Yazıyı Paylaşın

Flash e-Mail İletişim Formu

admin — Sun, 12 Sep 2010 22:50:56 +0000

Flash çalışmamızda Web sitelerinde kullanılan flash e-Mail formu nun hazırlanışını sizlere anlatmaya çalışacağım. Site içinde benzer uygulamalı dersimiz olmasına rağmen bir başka örnek uygulamayı sizlere anlatmak istedim.Flash sayfamızı açalım 285X425px
1-Çalışmada kullanmak için photoshop ile bir tasarı hazırladım flash içine import ettim sizlerde isterseniz buradan indirebilirsiniz.
2-Flash içine aldığım resmi F8 Symbol yapalım. Secili durumda movie clip yapalım name olarak bg_üst_mc yazalım. Klip seçili tekrar movie clip yapalım name olarak e-mail_mc yazalım. e-mail_mc klip içine girelim. Layer adını bg-üst yazalım.

3-Yeni layer ekleyelim layer adı bg bg layeri bg-üst layerin altına alalım rectangle tool aracı ile dikdörtgen oluşturalım dış çizgisi olmasın renk olarak #D7D7D7 yapalım seçili durumda symbol yapalım.sahne görüntümüz ve layer görünümü.

4-Yeni layer ekleyelim layer adı yazı olsun İLETİŞİM FORMU yazalım symbol yapalım. Yazı ve bg layeri kilitleyelim.

5-Kilitlemediğimiz bg-üst layerden bg_üst_mc klip içine girelim. bg-üst layer 2.frameye keyframe ekleyelim Dynamic text Mesaj İletildi yazalım.

6-Yeni frame ekleyim yazımızı değişelim Tekrar deneyin! Yazalım.
7-Yeni layer ekleyelim layer adı çizgi olsun rectangle tool aracı ile bir dikdörtgen oluşturalım symbol yalaım name cizgi olsun çalışmamızın alt tarafında resimdeki şekilde yerleştirelim transform aracı ile 2×13 olarak küçültelim örnek resim.

8-Yeni layer ekleyelim layer adı isim olsun Input text yazı olarak isminiz yazalım instance name kutusuna f1 yazalım. Var kutusuna name yazalım.

9-Yeni layer ekleyelim layer adı mail-adres olsun tekrar Imput text seçerek e-mail adresiniz yazalım instance name kutusuna f2 yazalım Var kutusuna email yazalım.
10-Yeni layer ekleyelim layer adı telefon olsun Input text seçelim telefon no: yazalım instance name kutusuna f3 yazalım Var kutusuna phone yazalım.
11-Yeni layer ekleyelim layer adı mesaj olsun Input text yazımızı yazalım iletiniz: şeklinde olsun yazı penceremiz mesaj kısmı kadar olsun. İnstance name kutusuna f4 yazalım Var kutusuna message yazalım. Örnek resim.

12-Şimdi iki adet buton hazırlayacağız yeni layer ekleyelim layer adı temizle olsun butonumuz movie klip olacak en kısa yoldan anlatayım Dynamic text yazı yazalım Temizle şeklinde yazı seçili klip yapalım name temizle_text_mc yazalım klşip seçili tekrar klip yapalım animasyon kısmı olacak name kısmına temizle_btn_mc yazalım layer1 7 framesine keyframe ekleyip yazı rengini değişelim color penceresinden advanced seçeneğini kullanabiliriz 15 frameye keyframe ekleyelim 1framedeki renk aynen kalsın işte kısaca animason bu yeni layer ekleyelim layer adı label olsun 2.framede keyframe ekleyip instance name kutusuna s1 yazalım 8 frameye keyframe ekleyip instance name kutusuna s2 yazalım. Yeni layer ekleyip layer adını action layer yapalım 1 framede keyframe ekleyip f9 actions penceresini açıp

stop ();

ekleyelim.
7.frameye keyframe ekleyip tekrar stop ekleyelim.Tekrar bg-üst-mc klip içine girelim temizle butonunu hazırladığımız çizgiye göre ayarlayalım klip sahnede seçili instance name kutusuna btnClear yazalım. Buton klip görünümü.

13-Yeni layer ekleyelim layer adı yolla olsun temizle butonunda olduğu şekilde klip oluşturalım klip yazımız Gönder olsun. İnstance name kutusuna btnSubmit yazlalım instance name kutularına yazı yazarken sahnedeki klipi seçili yapalım.

14-Çizgi layerin 2.framesine keyframe ekleyip dynamic text yazı yazalım yazımız Geri olsun 3.frameye keyframe ekelersek aynı yazımız 3.framedede olur.
15-İsim layerin 2.framesine keyframe ekleyelim hit kısmı aktif buton yapalım sahnede butonu seçili yapalım actions paneli açıp ekli koydu ekleyelim.

on (release)
{
    gotoAndStop(1);
}

16-En üstte yeni layer ekleyip layer adını action yazalım ekli kodları 1.frameye ekleyelim.

function clearField2()
{
    f1.text = label1;
    f2.text = label2;
    f3.text = label3;
    f4.text = label4;
} // End of the function
stop ();
label1 = "isminiz:";
label2 = "e-mail adres:";
label3 = "telefon no:";
label4 = "iletiniz:";
f1.onSetFocus = function ()
{
    if (this.text == label1)
    {
        this.text = "";
    } // end if
};
f1.onKillFocus = function ()
{
    if (this.text == "")
    {
        this.text = label1;
    } // end if
};
f2.onSetFocus = function ()
{
    if (this.text == label2)
    {
        this.text = "";
    } // end if
};
f2.onKillFocus = function ()
{
    if (this.text == "")
    {
        this.text = label2;
    } // end if
};
f3.onSetFocus = function ()
{
    if (this.text == label3)
    {
        this.text = "";
    } // end if
};
f3.onKillFocus = function ()
{
    if (this.text == "")
    {
        this.text = label3;
    } // end if
};
f4.onSetFocus = function ()
{
    if (this.text == label4)
    {
        this.text = "";
    } // end if
};
f4.onKillFocus = function ()
{
    if (this.text == "")
    {
        this.text = label4;
    } // end if
};
clearField2();
btnClear.onRollOver = function ()
{
    this.gotoAndPlay("s1");
    this.arow.gotoAndPlay("s1");
};
btnClear.onRollOut = btnClear.onReleaseOutside = function ()
{
    this.gotoAndPlay("s2");
    this.arow.gotoAndPlay("s2");
};
btnClear.onRelease = function ()
{
    clearField2();
};
btnSubmit.onRollOver = function ()
{
    this.gotoAndPlay("s1");
    this.arow.gotoAndPlay("s1");
};
btnSubmit.onRollOut = btnSubmit.onReleaseOutside = function ()
{
    this.gotoAndPlay("s2");
    this.arow.gotoAndPlay("s2");
};
btnSubmit.onRelease = function ()
{
    if (_parent.iletform.f1.text == "" || _parent.iletform.f2.text == "" || _parent.iletform.f3.text == "" || _parent.iletform.f4.text == "" || _parent.iletform.f1.text == label1 || _parent.iletform.f2.text == label2 || _parent.iletform.f3.text == label3 || _parent.iletform.f4.text == label4)
    {
        gotoAndStop(3);
    }
    else
    {
        _parent.iletform.loadVariables("email.php", "POST");
        gotoAndStop(2);
    } // end else if
};
stop ();

17-Action layerin 2. ve 3. framelerine keyframe ekleyip action paneli açarak stop ekleyelim.

stop ();

18-Bir hatırlatma buradaki örnekteki görünüm almak için bg-üst ve çizgi layerlerin 2 ve 3 framelerde sadece yazılar kalsın 1.framedeki movie klipleri silebiliriz olmaz isede olur çalışmanızı test ederseniz görebilirsiniz.
19-Çalışmamız sona erdi mail.php dosyasını ekli dosya içinde bulabilirsiniz yapmanız gereken değişiklik sadece mail adresiniz olacak. Ekli dosyayı olduğu gibi dizininize eklerseniz sorunsuz çalışacaktır tarafından test edilmiş olup harika bir form sahibi olacağınızı söyleyebilirim.

FLA İndir

Örnek uygulama sadece görünüm için eklidir çalışmamaktadır.

Bu Yazıyı Paylaşın

Kahve Kupası (Coffee Cup)

admin — Tue, 24 Aug 2010 19:04:44 +0000

Photoshop çalışmamızda içi sıcak,sıcak kahve dolu kahve kupası (Fincan) yapacağız ilk olarak bir çalışma sayfası açalım benim çalışma sayfam 1000×1000 px oldu arka renk olarak açık bir yeşil seçebiliriz.

Elipse Tool aracını seçelim içi siyah renk olsun elips oluşturalım örnek resim.

2-Rounded Rectangle Tool aracını seçelim üst menüden subtract from shape’yi seçelim. Shape layer seçili olsun. Örnek resim.

3- Rounded Rectangle Tool aracı ile elips oluşturalım fincanın ağız kısmı olacak renk olarak #262626 uygulayalım.

4- Rounded Rectangle Tool aracı ile fincanın gövde kısmını keselim.

5-Gövde layerde siyah rengimizi değişelim layer thumbnail üzerine tıklarsak renk paleti açılır renk #f5f5f5 uygulayalım.

6-Layer styles seçeneklerini gövde layerimize uygulayalım.

Görüntümüz.

7-Gövde layerini çoğaltalım duplicate layer Fill değerini 0 yapalım. Layer styles inner shadow uygulayalım.

8-Ağız layerine gelelim layer styles seçeneklerini uygulayalım. layer thumbnail üzerine tıklayarak siyah rengi f5f5f5 yapalım.

Elde ettiğimiz görünüm.

9-Ağız layerini çoğaltalım duplicate layer Free transform aracı ile küçültelim buradaki amaç fincanın iç kısmını yapmak olacak.
Layer styles seçeneklerini uygulayalım.

Görüntümüz.

10-Fincanımızın sap kısmını yapalım. Pen Tool aracı ile örnek resimdeki şekli oluşturalım.
Sap layer gövde layerin altında olacak.

11-Layer styles Inner Glow uygulayalım.

Elde ettiğimiz görünüm.

12-Ağız1 layeri çoğaltalım duplicate layer layer adını kahve olarak değişelim. Renk değiştirelim layer üzerinde layer thumbnail tıklayalım renk paletine # e3934c girelim.

13-Kahve layere layer styles seçeneklerini uygulayalım.

14-Kahve layerini çoğaltalım duplicate layer Fill opacity değerini %0 yapalım layer styles Inner Glow uygulayalım.

15- Texture olarak kullanmak için buradan imaj resmini indirebiliriz transform aracı ile ayarlama yapalım fincanın ağzını seçili yapıp mask uygulayalım layer mode multiply yapalım opacity değerini %42 yapalım.

16-Elipse Tool aracını seçelim renk olarak #983309 ayarlayıp farklı büyüklüklerde elips daireler oluşturalım. Layer adını köpük yapalım. Convert to Smart Object yapıyor devamında opacity değerini %36 yapıyoruz birazda gaussian blur uygularsak daha iyi olur.

17-Fincanın alt kısmına biraz gölge efekti verelim.
18-Kahvemizin sıcak görünmesini sağlayalım. Pen tool aracı ile örnek resimdeki şekli oluşturalım. Bir adet yapıp duplicate layer diyerek 5 adet kopya yapalım duman efekti layerlerimizi tek layer haline getirelim Merge Layers.

19-Filter> Liquify ile biraz karıştıralım Gaussian Blur uygulayıp Opacity değerini düşürelim elde ettiğimiz görünüm.
Final

Bu Yazıyı Paylaşın

3D Lighting Photoshop Brush

admin — Sun, 27 Jun 2010 21:10:07 +0000

Resimleriniz üzerinde uygulayabileceğiniz ışık efektleri için hazır fırçalar (3D Lighting Photoshop Brush)

Buradan İndir

Bu Yazıyı Paylaşın

Photoshop Flame Brush

admin — Sat, 19 Jun 2010 23:50:34 +0000

Photoshop hazır Alev (Flame) Fırça

İndir

Bu Yazıyı Paylaşın

Mouse Efekti Yapalım-AS3

admin — Mon, 24 May 2010 19:28:19 +0000

Ç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.

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.

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

Bu Yazıyı Paylaşın