photoders » Flash Dersleri

İ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

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

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

Resim Galeri Yapımı ActionScript 3.0

admin — Sun, 25 Apr 2010 21:08:18 +0000

Çalışmamızda resim galerisi hazırlayacağız. Çalışmamıza başlayalım ilk olarak yeni bir çalışma sayfası açalım açtığımız belge ActionScript 3.0 olsun. Çalışmada kullanacağımız resimleri File>Import >Import to Library seçeneğinden flash içine import edelim çalışmada kullandığım resimler ölçüleri 400×300 px olduğundan çalışma sayfasınıda resim değerlerine göre ayarlayalım.

1-Resimleri kütüphaneden Library alarak sahneye sıralayalım layer 1 adını resimler olarak değişelim. Sahnede sıraladığımız resimlerin hepsini seçili yapalım F8 movie clip yapalım Registration noktası sol köşe olarak seçelim name kutusuna olarak resimler yazalım. İnstance name kutusuna resimler_mc yazalım.

2-Yeni layer ekleyelim layer adı buton olsun sahnede resmin sağ ve sol kenarlarına iki tane buton çizelim butonları seçili yapıp F8 button yapalım. Sol buton seçili instance name kutusuna geri_btn yazalım sağ butonu seçip instance name kutusuna ileri_btn yazalım.

3-Yeni layer ekleyelim layer adını action olarak değişelim F9 Aktions paneli açıp ekli kod ekleyelim.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var ileriPS,geriPS=Tween;

ileri_btn.addEventListener(MouseEvent.CLICK, ileri);

function ileri(e:MouseEvent) {

    ileriPS=new Tween(resimler_mc,"x",Regular.easeOut,resimler_mc.x,resimler_mc.x-400,.5,true);
}

geri_btn.addEventListener(MouseEvent.CLICK, geri);

function geri(e:MouseEvent) {

    geriPS=new Tween(resimler_mc,"x",Regular.easeOut,resimler_mc.x,resimler_mc.x+400,.5,true);
}

stage.addEventListener(Event.ENTER_FRAME, kontrolEt);

function kontrolEt(e:Event) {
    if (resimler_mc.x>=0) {
        geri_btn.visible=false;
    } else  if (resimler_mc.x<=-1985) {
        ileri_btn.visible=false;
    } else  if  (resimler_mc.x <=-1&&resimler_mc.x>=-1984){
        ileri_btn.visible=true;
        geri_btn.visible=true;
    }

}

4-Çalışmayı test edelim
FLA İNDİR

Bu Yazıyı Paylaşın

Animasyon Ve Ses Ekli Flash Menü

admin — Fri, 09 Apr 2010 22:26:52 +0000

Flash çalışmamızda flash menü uygulamamızda animasyon ve ses ekleyerek daha etkili ve gösterişli bir tasarım olmasını sağlayacağız. Çalışmayı web sitenizde rahatlık ile kullanabilirsiniz.Yeni bir flash çalışma sayfası açalım 153×207 px olsun.
1-Sahnemizde butonların yer alacağı şekilde Line tool aracı ile bölelim örnek resim.

2-Menüde yer alacak yazıları yazalım.

3-Anasayfa yazı ve ilk çizgiyi seçili yapalım F8 Movie Clip yapalım name anasayfa_mc olsun klip sahnede seçili durumda instance name kutusuna anasayfa_mc yazalım.

4-Klipin içine girelim anasayfa_mc klip içine girdiğimizde layer 1 adını değişelim yazı olsun yazımız seçili F8 movie clip yapalım name anasayfa_gizli_mc olsun.

5-Yazı layerin 16 framesine keyframe ekleyelim Color kutusundan Tint seçip renk kutusuna #333333 ayarlayalım.

6-Yazı layerinde bulunan çizgiyi Mouse ile seçili yapıp kopyalayalım yeni layer ekleyelip layer adını çizgi yapalım kopyaladığımız çizgiyi paste yapalım yazı layerindeki ile aynı hizaya getirip yazı layerindeki çizgiyi silelim.

7-Yazı layerin 8 framesine keyframe ekleyelim yazıyı biraz aşağı kaydıralım klavyeden down tuşuna 5 kere tıklayalım layer aralarına create motion verelim.

8-Çizgi layer üzerine yeni layer ekleyelim layer adı dikdörtgen olsun 2.framede dış çizgisi olmayan bir dikdörtgen oluşturalım renk beyaz olsun. 16.frameye keyframe ekleyelim 2.frameye gelelim sahnedeki dikdörtgeni çizgiye doğru küçültelim 2.frameyle 16.frame arasına shape uygulayalım. Örnek resimde her 2 framedeki görünüm.

9-Scene 1 ana sahneye gelelim yeni layer ekleyelim layer adı gizlibuton-1 olsun. Rectangle Tool aracı ile dış çizgisi olmayan dikdörtgen oluşturalım.

10-Dikdörtgen seçili durumda F8 button yapalım name olarak gizlibuton_1 yazalım.

11-Butonun içine girelim buton sadece Hit alanında aktif olacağı için Hit frameye keyframe ekleyelim Up kısmını delete silelim ses eklemek için yeni layer ekleyelim over frameye keyframe ekleyelim properties panelden sound kutusundan ses dosyamızı aktif edelim.

12-Butonumuuzu kütüphanede çoğaltalım Duplcate name olarak gizlibuton-2 sırası ile menü sayımız kadar çoğaltalım. Hazır olsun.
13-İlk anlattığım anasayfa_mc nasıl yaptıysak diğer klipleri hazırlayalım hakkimda_mc,photoshop_mc,flash_mc,video_mc,iletisim_mc şeklinde isimlendirerek yapalım bu isimleri instance name kutusuna eklemeyi unutmayalım.
14-Klipleri tek layer üzerinde oluşturduktan sonra hazırladığımız gizlibuton-2 den başlayarak yeni layerler ekleyerek tek,tek butonları ekleyelim.

15-Yeni layer ekleyelim en üst layer layer adı action olsun ekli F9 actions paneli açıp ekli kodu ekleyelim.

_root.anasayfa_mc.onEnterFrame = function() {
if (mouse_over_anasayfa_mc) {
_root.anasayfa_mc.nextFrame();
} else {
_root.anasayfa_mc.prevFrame();
}
};

_root.hakkimda_mc.onEnterFrame = function() {
if (mouse_over_hakkimda_mc) {
_root.hakkimda_mc.nextFrame();
} else {
_root.hakkimda_mc.prevFrame();
}
};

_root.photoshop_mc.onEnterFrame = function() {
if (mouse_over_photoshop_mc) {
_root.photoshop_mc.nextFrame();
} else {
_root.photoshop_mc.prevFrame();
}
};

_root.flash_mc.onEnterFrame = function() {
if (mouse_over_flash_mc) {
_root.flash_mc.nextFrame();
} else {
_root.flash_mc.prevFrame();
}
};

_root.video_mc.onEnterFrame = function() {
if (mouse_over_video_mc) {
_root.video_mc.nextFrame();
} else {
_root.video_mc.prevFrame();
}
};

_root.iletisim_mc.onEnterFrame = function() {
if (mouse_over_iletisim_mc) {
_root.iletisim_mc.nextFrame();
} else {
_root.iletisim_mc.prevFrame();
}
};

16-Tek,tek gizlibuton-1 dan başlayarak üzerinde sağ klik actions paneli açıp ekli kodu ekleyelim.

on (rollOver) {
_root.mouse_over_anasayfa_mc = true;
}

on (rollOut) {
_root.mouse_over_anasayfa_mc = fstartlse;
}

on (release){
getURL("http://www.photoders.com/");
}

17- Ekli kodu diğer gizli butonlarda ekleyelim sadece anasayfa_mc yazılı yeri buton ismine göre düzeltelim. Son olarak frame rate 40 yapalım
Çalışmamızı test edelim Ctrl+Enter veya web düzeninde izleyebiliriz F12

FLA İndir

Bu Yazıyı Paylaşın

Flash Tema Yapımı

admin — Fri, 19 Mar 2010 14:31:05 +0000

Flash çalışmamızda flash template yapacağız daha önce farklı uygulamalar ile tema hazırlamıştık. Yeni çalışmamızın flash tema tasarlamak isteyen meraklılara örnek olacağı kanısındayım. İlk olarak arka plan hazırlayalım. Fash temamızın ebatları 900X600 pixels olacağı için hazırladığım arka plan resmini isterseniz buradan indirebilirsiniz.

Flash çalışma sayfamızı açalım 900x600px hazırladığımız arka planı sahneye alalım.

1-Arka plan resmimizi sahneye ortalayalım F8 graphic yapalım layer adı bg yazalım.
2-İlk olarak bir buton yapalım butonu istediğiniz şekilde yapabilirsiniz. Buton yapımını anlatmıyorum basit bir buton hazırlamanız yeterlidir. Unutmadan hazırlanan butonları movie clip yapacağız. Butonu hazırladığımıza göre bg layer üzrine yeni bir layer ekleyelim layer adı b1 olsun buton seçili instance name kutusuna p1 yazalım tüm 11 frameye keyframe ekleyelim. Frameler arasına create motion tween verelim 1.framede alpa değerini 0 yapalım.

3-Hazırladığımız butonu movie klip yapmıştık ben klip için btn_mc1 adını kullandım kütüphanede buton klipi çoğaltalım çalışmamızda 6 adet buton olacağı için sırası ile çoğaltalım btn_mc1, btn_mc2 sırası ile isimlendirebiliriz.
4-b1 layer üzerine sırası ile yeni layerler ekleyerek b1 layerdeki işlemi tekrarlayalım. Her movie klip sahnede seçili durumda iken instance name kutusuna sırası ile p1,p2,p3,p4,p5,p6 isimlendirelim. Kolay anlamanız için kütüphanedeki görünümüde ekledim. Sizi aldatmasın ben butonu animasyonlu yapmak için Up, Over yerleri için klip oluşturdum.

5-Hazırladığım arka plan resimde üst sağ köşeye 2 buton yeri oluşturmuştum şimdi oraya buton hazırlayıp ekleyelim b6 layer üzerine layer ekleyelip layer adlarını üstbut-1 ve üstbut-2 olsun.Unutmayalım hazırladığınız butonları “movie clip” yapalım. İnstance name kutularına aynı sıralamayı takip ederek p7 ve p8 yazalım.

6-Butonları hazırlamış olduk sayfalarımızı düzenledikten sonra sayfalara yönlendirme kodunu ekleyeceğiz.
Şimdi sayfaları yapalım.üstbuton layer üzerinde yeni layer ekleyelim 11 frameye keyframe ekeleyeip text tool aracını seçip dynamic text yazımızı ekleyelim. Uzun yazı eklemek için scrollbar ekleyelim Windows>Components penceresinde UIScrollbar yazımızın yanına ekleyelim. Örnek resim

7- Eklediğimiz scrollbar seçili yapıp properties panelden parameters açalım “targetİnstanceName“ kutusuna scrollbar yazalım. Şimdi yazıyı seçili yapıp instance name kutusuna “scrollbar”yazalım.

8-Sağ boş yere resim ekleyelim Sayfa layer 11 framede yaptığımız işlemeri seçili yapalım F8 movie clip yapalım name olarak “sayfalar” yazalım. Sayfalar klipin içine girelim layer1 adını değişelim layer adı text olsun. Yeni layer ekleyelim layer adı “photo” olsun text laere eklediğimiz resmi oradan silip photo layerde aynı yere ekleyelim. Text layer 11.frameye keyframe ekleyelim 6 frameye gelip insert blank keyframe ekleyelim 1.frameye gelelim şimdi sayfa başlığı yazıyı notrmal text yazalım. photo layerinde 11 framesine keyframe ekleyelim.

9-11.framede aynı yazımız ekli durumda yapacağımız şey oradaki yazıyı istediğimiz yazı ile değişmek olacak photo layerin 11.framesinde resmimizi değişelim yeni resmi ekleyebiliriz text layerde yazımız değişti şimdi 21 frameye keyframe ekleyelim 16 framede insert blank keyframe ekleyelim.

10-İki sayfa hazırladık diğer sayfaları aynı uygulamayı tekrarlayarak 8 adet menümüz olduğundan 8 adet sayfayı tamamlayalım. Photo layer üzerine yeni layer ekleyelim layer adı “label” olsun 1.frameye “stop” ekleyelim frame seçili instance name kutusuna “anasayfa” yazalım 11.frameye keyframe ekleyelim instance name kutusuna “hakkimizda” yazalım 21.frameye keyframe eklip instance name kutusuna “photoshop” yazalım örnek uygulamayı 71 frameye kadar devam edelim. Örnek resmi inceleyin layer 3 görünen isimler instance name isimleri oluyor.

11- Sayfaları hazırlamış olduk ana sayfaya scene1 geri dönelim sayfalar layerinde sayfalar klipi sahnede seçili durumda instance name kutusuna “sayfa” yazalım. Sayfalar layeri üzerine yeni layer ekleyelim layer adını mask olarak yazalım 11. frameye keyframe ekleyip rectangle tool aracı ile sahneye sayfamızı kapatacak kadar dış çizgizi olmayan dikdörtgen oluşturalım. F8 graphic yapalım name “sayfamask” olsun.

12-Mask layer 23 frameye ve 37 framelere keyframe ekleyelim 11.frameye gelelim maskı yazının üst tarafına kaydıralım 23 framede yazımızı tam kapatıyor durumda 37 framede maskı yazı sayfamızın alt tarafına kaydıralım layerler arasına create motion tween verelim. Mask layer üzerine gelip sağ klik mask uygulayalım.
13- Şimdi kodlarımızı ekleyelim ilk olarak mask layer üzerinde yeni layer ekleyip layer adını action yazalım. 1.framede actions paneli açalım ekli kodları ekleyelim.

sayfalar =
p1.txt = "anasayfa";
p2.txt = "hakkimizda";
p3.txt = "photoshop";
p4.txt = "flashders";
p5.txt = "videoders";
p6.txt = "galeri";
p7.txt = "referanslar";
p8.txt = "iletisim";

14-Action layerin 11. framesine keyframe ekleyelim ekli kodları actions paneli açıp ekleyelim. 11.framede instance name kutusuna “play”yazalım

sayfa.gotoAndStop(sayfalar);
sayfa_eski = sayfalar;

15-23.frameye keyframe ekleyip actions paneli açıp stop ekleyelim.

stop();

16-24 frameye keyframe ekleyip actions panele ekli kodları ekleyelim.

if( sayfalar == sayfa_eski )
{
	prevFrame();
}

16-37 frameye keyframe ekleyip actions panele ekli kodu ekleyelim.

gotoAndPlay("play");

17- Butonlarımıza komut verelim buton kliplere scene1 sahnede tıklayalım içine girdiğimizde buton olarak göreceğiz sahnede seçili yapıp sağ klik actions paneli açıp ekli kodu girelim.

on (release) {
	_root.sayfalar = txt;
	_root.play();
}

18-Anasayfadaki tüm buton kliplerimizin içine tek, tek girip ekli kodu ekleyelim.
19-Artık çalışmamızı bitirdik son olarak tüm layerlerin görünümünü vereyim.

20-Çalışmayı test edelim F12 direk sayfa üzerinden izleyebilirsiniz veya Ctrl +Enter
21-Çalışmada boş kalan yerler logo header kısmıdır sizler istediğiniz çalışmayı yapabilirsiniz. İzlediğiniz örnek çalışmada farklılıkları görebilirsiniz.

Örnek Çalışmayı İzle

Bu Yazıyı Paylaşın

Kayan Menü Bar

admin — Fri, 26 Feb 2010 00:10:19 +0000

Flash çalışmamızda kayan menü hazırlayacağız. Yeni çalışma sayfası açalım benim tercihim 400×300 px oldu çalışmada kullanmak için kullanacağım buton yerine ben resimler hazırladım siz isteğinize göre değişik tasarımlar yapabilirsiniz.
1-Çalışmada kullandığı 6 adet resmi import ettim. Kütüphaneden resimleri tek, tek alarak movie klip yapalım name olarak sıralarsak “img_mc1” yazabiliriz.

2-New Symbol yeni movie clip yaratalım isim olarak “img_kayan_mc” yazalım klip içine girelim layer1 kütüphaneden “img_mc1” klipi alarak ayarlayalım klip seçili instance name kutusuna “img4”yazalım.

3-Yeni layer ekleyelim layer adı “img_mc2”klipi alarak ayarlayalım klip seçili instance name kutusuna “img3” yazalım.

4-Örnek resimlerde görüldüğü şekilde siz diğer klipleri sıralıyoruz.

5-Yeni layer ekleyelim layer adı mask olsun Rectangle Tool aracı ile örnek resimdeki şekilde bir dikdörtgen oluşturalım.

6-Mask layer üzerinde sağ klik mask uygulayalım layerleri mask içine kaydıralım. Yeni layer ekleyelim layer adı action olsun.

7-Action layer 1.framede actios paneli açıp ekli kodu ekleyelim.

stop();

//Setup////////////////////////////////////////

//toplam clip sayı - properties panelden instance name sıralaması img1,img2,img3,şeklinde
var totalClips = 6;			

//stop clip itibaren tam değişerek hareket;
var holdPosition = false; 

//max hız movie clip
var maxSpeed = false;

///////////////////////////////////////////////////

var slideSpeed 		= 0.1;
var currentMousex 	= 0;
var clipBaseName 	= 'img';
var w_clips 		= this[clipBaseName + '1']._width+2;
var totalWidth 		= (totalClips * w_clips);
var maxleft 		= img1._x;
var maxright 		= (totalWidth/2);
//--

onEnterFrame = function(){
	currentMousex = Math.floor(this._xmouse);
	if(maxSpeed != false) currentMousex = (currentMousex >= maxSpeed)? maxSpeed : -maxSpeed;

	//-----------------------------------------
	if(!holdPosition){
		for(i=0;i <= totalClips; i++){
			var tmpObj = this[clipBaseName + i];
			tmpObj._x = Math.floor(tmpObj._x-(currentMousex*slideSpeed));
			if(tmpObj._x <= maxleft){tmpObj._x += totalWidth;}
			if(tmpObj._x >= maxright){tmpObj._x -= totalWidth;}
		}
	}
}

8-Scene1 sahnemize gelip kütüphaneden “img_kayan_mc”klipi alarak layer1 1.frameye ekleyelip sahnede klipi seçerek tekrar movie clip yapalım. Name “page_mc”yazalım page_mc içine girelim merkez nokta ayarını yapalım örnek resmi inceleyin.

9-Çalışmamızın son olarak scene1 üzerindeki görünümünü vereyim.

Not: Çalımadaki resimleri buton yapmak isterseniz resimleri tek, tek klip yaptığınız klipler içine girerek yeni layer ekleyin resmi kapatacak bir kare oluşturun buton sadece hit kısmı aktif olacak unutmayalım buton üzerine gelip link verebilirsiniz.
Çalışmamızı bitirdik test edelim Ctrl+Enter

FLA İndir

Bu Yazıyı Paylaşın