flash dersler1

yazımızda aşağıdaki flash konularına yer verdik

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
1-Sürükle-Bırak (1-Komutların Öğrenilmesi)
2-FLASH ÇALIŞMANIZI TAM EKRAN YAPMA
3-AS3 & Php ile İletişim Formu
4-Dışardan Resim-Swf Çağırma (As3)
5-Motion Blur (Hareketle Bulanıklık)
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

1-Sürükle-Bırak (1-Komutların Öğrenilmesi) Bu dersimizde herhangi bir öğeyi flash içerisinde as3 ile sürüklenebilir yapmayı öğreneceğiz.Dersimiz boyunca flash programında hiçbir çizim yapmıyacağız.Gerekli olan herşey tamamen kodlarla yapılacaktır.

1.Gerekli Öğelerin Oluşturulması

/*Sahne ve top isimli ögeleri oluşturalım.*/
var sahne:Sprite = new Sprite();
var top:Sprite = new Sprite();

/*Ana sahnemize oluşturduğumuz sahneyi ve onun içerisine topu ekleyelim*/
addChild(sahne);
sahne.addChild(top);

//Sahnenin kenar çizgisini siyah yapalım
sahne.graphics.lineStyle(1,0x000000);
//Sahnenin dolgu rengini gri yapalım
sahne.graphics.beginFill(0xCCCCCC);
//Sahneyi kare olarak çizelim
sahne.graphics.drawRect(0,0,400,300);
//Çizimi bitirelim
sahne.graphics.endFill();
//Kordinat verelim
sahne.x = 10;
sahne.y = 10;

//Top'un kenar rengini belirleyelim
top.graphics.lineStyle(1,0x000000);
//Top'un dolgu rengini belirleyelim
top.graphics.beginFill(0xBB2222);
//Topu sahneye çizelim
top.graphics.drawCircle(0,0,20);
//Çizimi bitirelim
top.graphics.endFill();
//Kordinat Verelim
top.x = 50;
top.y = 50;

2.Sürükleme Başlasın !

//Top'a tıklandığı anda sürükleme fonksiyonu
top.addEventListener(MouseEvent.MOUSE_DOWN,surukle);
function surukle(evt:MouseEvent):void
{
            top.startDrag();
}

//Mouse Topu bıraktığında sürüklemenin durması
top.addEventListener(MouseEvent.MOUSE_UP,birak);
function birak(evt:MouseEvent):void
{
            top.stopDrag();
}

startDrag : Sürüklemeyi başlatır.

stopDrag : Sürüklemeyi durdurur.

—————————————————————-

2- FLASH ÇALIŞMANIZI TAM EKRAN YAPMA

aptığınız çalışmayı TAM EKRAN görebilme imkanı sağlamak istersiniz. Yani bence kesin istersiniz.  Yukarıda saydığım şartlara uyuyorsanız istemeniz lazım. =) İstemiyorsanız eğer, bu makale size göre değil. Sağ üstteki arama bölümünden size göre olan başka bir makale bulabilirsiniz =P

Tam ekran yapabilmek için butonunuza aşağıdaki kodu:

stage.displayState = StageDisplayState.FULL_SCREEN;

Normal ekrana geri dönebilmek için de aşağıdaki kodu veriniz.

stage.displayState = StageDisplayState.NORMAL;

Tabi flashta bu kodları verdik. Sonra Test Movie yaptık butonlarımıza basıyoruz. Cık, çalışmıyor. Doğru, flash içinde test movie ile çalışmaz.

Çalışmamızı export ettik. Sonra Swf dosyamızı çalıştırdık. Tam ekrana bastık. Çalıştı.

Sonra HTML içine embed ettik swf dosyamızı. HTML’i tarayıcıda açtık, tamekran butonuna bastık. Cık, çalışmadı.

Ne yapacağız ?

HTML kodlarımızı açıp, “allowFullScreen” parametresine “true” vericez. Sonra çalışacak.

<param value="true" />

Deneyin görün…

Editörde, dosya yüklemeyi bulursam, örnek dosyaları da ekleyeceğim.

Ercüment Ekinci

—————————————————————

3-AS3 & Php ile İletişim Formu

Posted by Selman KURT in ActionScript 3.0 on 01 31st, 2010 | 10 responses

Merhaba Arkadaşlar, flashdersleri.net’teki bu ilk dersimde Flash ve Php ile web sitesinde mail gönderme formu, nasıl yapılır onu anlatacağım.

İşin sadece flash yönünü anlatacağım Php bilgim az olduğu için  o konuya girmeyeceğm php dosyasını dersin sonunda verdiğim linkten indirebilirsiniz.
Derse başlamadan, önce ders için hazırladığım bu mail_form.fla dosyasını indirip, açın.
.fla’nın içinde, sahnede 5 text kutucuğu ve 2 buton bulunmaktadır.

Text Kutucukları;

  • isim_txt
  • email_txt
  • konu_txt
  • mesaj_txt
  • rapor_txt

Text kutucuklarından 4′ü (isim_txt, email_txt, konu_txt, mesaj_txt) input text,  rapor_txt ise dynamic text formatındadır.

Butonlar;

  • temizle_btn
  • gonder_btn

Hemen Actions panelimizi açıp kodlarımızı yazmaya başlayalım.

İlk olarak her ihtimale karşı bütün text kutucuklarımızı boşaltıyoruz.

 isim_txt.text="";
 email_txt.text="";
 konu_txt.text="";
 mesaj_txt.text="";
//rapor_mc nin visible(görünürlük) değerini false(görünmez) olarak ayarlıyoruz.
rapor_mc.visible=false;

Değikenleri oluşturuyoruz.

var zamanlayici:Timer;
var url_yukle:URLLoader=new URLLoader  ;
var url_adresi:URLRequest=new URLRequest("gonder.php");
url_adresi.method=URLRequestMethod.POST; 

Buttonlara olay dinleyicilerini atıyoruz.

 gonder_btn.addEventListener(MouseEvent.CLICK, gonderFNC);
temizle_btn.addEventListener(MouseEvent.CLICK, temizleFNC);

temizleFNC Fonksiyonunu:

 function temizleFNC(e:Event){
 isim_txt.text="";
 email_txt.text="";
 konu_txt.text="";
 mesaj_txt.text="";
mesaj_txt.sdlf
 rapor_mc.visible=false;
}

gonderFNC Fonksiyonu:

gonderFNC fonksiyonunda ilk olarak rapor_mc nin visible değerini true olarak ayarlıyoruz.

Daha sonra ilk if te, girilmesi zorunlu olan tüm text kutucuklarının boş olup olmadığı kontrol ediliyor.

İlk if’in şartları onaylandıktan sonra else if’te mailKontrolFNC fonksiyonu ile mailin doğrumu yanlışmı girildiği kontrol ediliyor.

else if’in şartlarıda onaylandıktan sonra else ile rapor_mc’nin içindeki rapor_txt’e “Gönderiliyor…” yazdırılıyor, ve sonra email_data adı ile oluşturulan String türünde değişken ile text kutucuklarına girilen değerler URL_vars değişkeniyle Text formatıyla url_adresi değişkenine ardından url_yukle değişkenine eşitleniyor.

url_yukle değişkenine eklene olay denetleyicisi ile veri yuklendikten sonra yanitAlFNC fonksiyonu çağrılıyor.

function gonderFNC(e:Event) {
 rapor_mc.visible=true;
 if (isim_txt.text==""||email_txt.text==""||konu_txt.text==""||mesaj_txt.text=="") {
 rapor_mc.rapor_txt.text="Lütfen tüm alanları doldurunuz.";
 } else if (!mailKontrolFNC(email_txt.text)) {
 rapor_mc.rapor_txt.text="Lütfen email adresinizi kontrol edin.";
 } else {
 rapor_mc.rapor_txt.text="Gönderiliyor...";
 var email_data:String="name="+isim_txt.text+"$email="+email_txt.text+"$konu="+konu_txt.text+"$mesaj="+mesaj_txt.text;
 var URL_vars:URLVariables=new URLVariables(email_data);
 URL_vars.dataFormat=URLLoaderDataFormat.TEXT;

 url_adresi.data=URL_vars;
 url_yukle.load(url_adresi);
 url_yukle.addEventListener(Event.COMPLETE,yanitAlFNC);
 }
}

mailKontrolFNC Fonksiyonu:

mailKontrolFNC fonksiyonu ile email_txt text kutucuğuna girilen mail adresinin doğru olup olmadığı kontrol ediliyor.

function mailKontrolFNC(s:String):Boolean {
 var p:RegExp=/^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/;
 var r:Object = p.exec(s)
 if (r==null) {
 return false;
 }
 return true;
}

yanitAlFNC Fonksiyonu

yanitAlFNC fonksiyonunda zamanlayici fonksiyonu ile verilerin belirtilen php dosyasına ulaşıp ulaşmadığı kontrol ediliyor.

function yanitAlFNC(e:Event):void {
 var yukleyici:URLLoader=URLLoader(e.target);
 var email_durumu=new URLVariables(yukleyici.data).success;

 if (email_durumu=="yes") {
 rapor_mc.rapor_txt.text="Mesajınız başarılı bir şekilde gönderilmiştir.";
 zamanlayici=new Timer(500);
 zamanlayici.addEventListener(TimerEvent.TIMER, zamanlayiciFNC);
 zamanlayici.start();
 } else {
 mesaj_txt.text="Mesajınız Gönderilemedi.";
 }
}

zamanlayiciFNC Fonksiyonu

zamanlayiciFNC  fonksiyonu belirtilen süreden sonra tüm text kutucuklarının içini boşaltıyor.

 function zamanlayiciFNC(te:TimerEvent):void {
 if (zamanlayici.currentCount>=10) {
 isim_txt.text="";
 email_txt.text="";
 konu_txt.text="";
 mesaj_txt.text="";
 rapor_mc.visible=false;
 zamanlayici.removeEventListener(TimerEvent.TIMER,zamanlayiciFNC);
 }
}

Dosyalar:

——————————————————————

4-Dışardan Resim-Swf Çağırma (As3)

Merhaba, bu dersimizde Action Script 3 kodlarıyla dışardan resim ya da swf çağırmayı öğreneceğiz.

Yapmamız gereken sadece 1.frame’e şu kodları eklemek;

var yukle:Loader = new Loader();
var resim:URLRequest = new URLRequest("flashArsivi.gif");
yukle.load(resim);
addChild(yukle);

Burda dikkat etmeniz gerekenler, kırmızı ile belirtilenlerin aynı adda olması ve yine koyu mavi ile belirtilen “resim” lerin aynı adda olması.Yeşil ile yazılan “flashArsivi.gif” sizin çağıracağınız resim ya da swf dir.Uzantıyı .swf olarak değiştirdiğinizde flashArsivi.swf dosyasını çağırır.

Yukardaki kod ile gelen resim ve swfler sahnenin (0,0) kordinatına yani x=0 y=0, yani sahnenin sol üst köşesine gelir.Şimdi çağırdığımız obje yi aşağıdaki kodları ekleyerek konumlandırabiliriz;

yukle.x=100;
yukle.y=150;

Bu kodları ekledğinizde çağırdığınız objeyi 100 e 150 olarak konumlandıracaktır.
Son haliyle kod aşağıdaki gibi olmalıdır;

var yukle:Loader = new Loader();
var resim:URLRequest = new URLRequest("flashArsivi.gif");
yukle.load(resim);
yukle.x=100;
yukle.y=150;
addChild(yukle);

Şimdi ilk koda konumlandırma eklemeden çağıracağımız objeyi bir Movie Clip içine çağıralım.
Öncelikle sahneye bir çizim yapıp onu seçip F8ile Movie Clip yapalım.Movie clipin içindeki çizim önemli değildir, sahnede boş movie clip de olabilir.
Daha sonra oluşturduğumuz movie clip’i seçip Properties panelinden Intance Name değerine mcFa yazalım.Şimdi ilk kodumuzdaki addChild(yukle); satırının başına mcFa. ekleyelim yani şöyle yapalım;
mcFa.addChild(yukle);
Buna göre son kodumuz şöyle olacaktır;

var yukle:Loader = new Loader();
var resim:URLRequest = new URLRequest("flashArsivi.gif");
yukle.load(resim);
mcFa.addChild(yukle);

Bir sonraki derste çağırdığımız gif,jpg vs. gibi resimlere ve swf lere Preloader(yükleyici) eklemeyi anlatacağız.

Çalışmayı indirmek için ; http://www.flasharsivi.com/izle.asp?fla_no=2670
Önizleme;

5-Motion Blur (Hareketle Bulanıklık)

Bir cismin yaptığı hareket ile yapay olarak blur(bulanıklık) etkisi alması, animasyonlarda sık kullanılan bir -gerçekçi hızlı obje görüntüsü- elde etme yöntemidir. Bu efekti oluşturmada temel mantık cismin blur değerinin hareket ivmesiyle orantılandırılmasıdır. Böylelikle cisim belirli bir zamanda ne kadar hızlanırsa yani ivmesi ne ise blur değeri de onu referans alarak oranlanır. Önce anlatmaya çalıştığımız şeyle ilgili örnekleri görelim;

Örneklerde de görüldüğü gibi cisimler ne kadar hızlanırlarsa o kadar motion blur etkisi alıyor ve daha gerçekçi animasyonlar oluşuyor ( Bu iki örnekte amacı daha iyi belirtmek için blur değerleri biraz abartılı verilmiş olabilir. Siz bunu ivme değerini küçülterek değiştirebilirsiniz.)
İlk örneği yapabilmek için sahneye “a_mc” isminde bir araç klibi koyuyoruz. Kullandığımız kodlar ise aynı satırdaki açıklamalarıyla birlikte şunlardır:

var blur = new BlurFilter();/*yeni bir blur filtresi oluşturduk*/
var drc:Number/*ivme değeri*/
var hdf:uint=470/*aracın ulaşacağı hedef x konumu*/
var ilk:Number=a_mc.x/*işlemi tekrarlamak için ilk konum değeri*/

stage.addEventListener(MouseEvent.MOUSE_UP,git)/*sahneye tıklama fonksiyonu çağırıldı*/
function git(e:MouseEvent){
a_mc.x=ilk/*ilk durumda a_mc'yi ilk konuma koyduk ki her seferinde buradan başlasın*/
a_mc.addEventListener(Event.ENTER_FRAME,ef)/*sürekli çalışacak fonksiyonu çağırıyoruz*/
}
function ef(e:Event){
drc=(hdf-a_mc.x)/10/*ivme, hedefle mevcut konum arasındaki uzaklıkla orantılı*/
a_mc.x +=drc/*her framede ivme değeri kadar x konum artışı*/
blur.blurX =drc*2/*x ekseni blur değeri ivme ile orantılı*/
blur.blurY =0/*blur y olmasın*/
a_mc.filters = [blur];/*a_mc'ye blur filtresi atanıyor*/
}

İkinci örnekte ise mouse’u x konumunda takip edecek kutuyu çizip yine “a_mc” ismini veriyoruz. Burada hedef değerimiz mouseX olacaktır. Ayrıca ters yönde hareket(hem soldan sağa hem sağdan sola) olduğu için blur x değerinin negatif değer almasını engellemek için ivme(drc) değerini mutlak değer içine(Math.abs) alıyoruz. Kodlarımız ise şu şekilde:

var blur = new BlurFilter();/*yeni bir blur filtresi oluşturduk*/
var drc:Number/*ivme değeri*/
var hdf:uint=mouseX/*hareket hedefini mouse x konumu olarak ayarlıyoruz*/
stage.addEventListener(Event.ENTER_FRAME,ef)/*sürekli çalışacak fonksiyon çağırılıyor*/
function ef(e:Event){
hdf=mouseX/*hedef sürekli mouseX'e eşitlensin*/
drc=(hdf-a_mc.x)/5/*ivme değeri*/
a_mc.x +=drc/*ivme etkisi*/
if(mouseX<=0){blur.blurX=0}else{blur.blurX =Math.abs(drc)*2}/*blur değeri negatif değer almasın diye Math.abs içine aldık*/
blur.blurY =0/*blur y değeri olmasın*/
a_mc.filters = [blur];/*filtre a_mc'ye atanıyor*/
}

İki örnekte de ease tween hareket yöntemi ile cisimleri hareketlendirdik ve ivme değişkenine göre cisimlere bulanıklık vererek daha gerçekçi hareket animasyonu yaptık. Bu yöntem scrollbar, scrollpane gibi scroll hareketlerinde kaydırılacak zeminin hız efekti için ve diğer bir çok hareket simulasyonunda daha gerçekçi animasyonlar elde etmek için kullanılabiliyor.

Kaynak:Bu yazılardan dolayı sn.Ercüment Ekinci’ ye teşekkür ediyoruz

Yorumlar
  1. […] Flash örnekleri ve anlatımlar Dreamweaver CSS Kullanarak Sayfa Ara Yüz Tasarımı Wamp Server 5 kurulumu ve ayarlar WordPress kurulumu Çok güzel bir ASP Eğitim kitabı […]

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s