Flash AS3-Motion Blur Efekti

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;

http://www.flashdersleri.net/wp-content/uploads/2010/01/blur1.swf

http://www.flashdersleri.net/wp-content/uploads/2010/01/blur2.swf

Ö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 Dosyaları:
blur1.fla | blur2.fla