Büyültme Efekti 2

Bu çalışma özellikle birden fazla ürün tanıtımında oldukça faydalı olacaktır.Ürünleri küçük boyutlu bir resimle gösterip istenilen alanları bir maske katmanında büyülterek detaylarınma görsel olarakta etkili bir çalışmadır.

Şimdi alttaki örneği inceleyiniz. Küçük resim üzerindeki çemberi farenin sol tuşuna basarak sürüklediğinizde büyültülmüş görüntüsü soldaki daire içinde gözlenecektir:

DOSYAYI İNDİR

Yukardaki çalışmayı incelediğinizde şu işlemlerin yapılmasına ihtiyaç olacağını farkedeceksiniz:

1-İki farklı boyutta hazırlanmış bir resim. Bu tür bir işlem için bir resim editörüne ihtiyacınız olacaktır.Bizim çalışmamızdaki resim bu tür örneğin bol miktarda kullanıldığı www.bennetton.com adresinden alınmıştır.

2- Bu çalışmada flash`ın matematiksel özelliğinden bolca faydalanılmıştır.Çemberi fare ile sürüklerken sadece küçük resim üzerinde hareket ettiğini görüyorsunuz. Bu çalışmayı yapabilmek için küçük resimin sol, üst, sağ ve alt sınırlarını bir dizi matematiksel işlemlerden sonra bulmak gereklidir.

3- Sağda imleçin durduğu alandaki görüntünün soldaki büyük resim üzerindeki izdişümünü bulup maske klibinin ortasına getirmek içinde yine matematik işlemlerinden yararlanıyoruz.

Bu işlemlerin neler olduğunu anlamak için alttaki grafiğe bakın. İlk anda karışık gelebilir. Alttaki açıklamaları görünce karışık olmadığını son derece mantıklı matematiksel işlemler kullanıldığını göreceksiniz.

Animasyonun oluşumu:

1- Önce yardımcı programlar ile örnek resmimizi oluşturalım.Büyültme oranını tesbit ederek aynı resimin 2. örneğini hazırlayalım. Çalışmamızda 3 kat büyültme esas alındığından ilk resim 165*300 ikinci resim 495*900 ebadlarında oluşturulmuştur. Kaç kat büyütüleceği önemlidir. çünkü bu değerleri sonraki matematiksel işlemlerde kullanacağız.

2- Flash programını açalım. CTRL+F8 e basıp bir film klibi oluşturalım ve küçük resimi bu klip içine import edelim. Yine yeni bir film klibi oluşturalım ve büyük resimi bu klip içine alalım.Sahnemiz hala boş olmasına rağmen kütüphanede 2 adet film klibimiz hazır beklemektedir.Küçük resimi içeren klibi sahnenin sağına büyük olanı sola yerleştirelim.Küçük klibe instance name olarak kucuk , diğerine buyuk adını atayalım.

3- Üste yeni bir layer ekleyelim ve küçük resim üserine içi boş bir çember çizelim.Çemberi seçip film klibi yapalım ve instance name kısmına buton yazalım. Buton klibimizi açalım. 1. karede boş bir çember göreceksiniz. Bu çemberi seçip buton haline getirelim.Butonun seçildiğini anlamak için over alanıda rengini değiştirelim.Butonu yapma amacımız sadece el işaretinin çıkması içindir, buraya hiçbir komut atamayacağız.

Şimdi soldaki büyük resmin üzerine maske efekti için uygun genişlikte daire şeklinde bir dolgu çizelim.(içi dolu olmalıdır) Sonra bu dolguyu seçip film klibi yapalım ve instance name kısmına maske yazalım. Maskenin etrafında süs amaçlı bir daire isterseniz en üst kısma yeni bir layer ekleyip tüm maskeyi içine alacak şekilde içi boş bir çember çizebilirsiniz.

4- Artık tüm elemanlar yerleşmiş durumda, şimdi kodlara geçebiliriz. En üste bir aksiyon katmanı yerleştirip mevcut tek kareye şu komutları atayalım:

buyuk.setMask(maske);
sol=_root.kucuk._x-(_root.kucuk._width/2);
ust=_root.kucuk._y-(_root.kucuk._height/2);
sag=_root.kucuk._x+(_root.kucuk._width/2);
alt=_root.kucuk._y+(_root.kucuk._height/2);

İlk dizinde maske klibi buyuk klibini maskelemeyi sağlamaktadır. Böylece büyük resimin sadece bu daire içindeki kısımları gözlenecektir.

Alttaki dizinlerde farenin küçük resim üzerinde dolaşacağı sınırlar çizilmiştir. Grafide de gördüğünüz gibi bir film klibinin merkez noktası siz değiştimediğiniz sürece tam ortadadır(içi boş minik bir çember şeklinde gözlenir) ve x ve y eksenleri bu noktaya göre ayarlanır. Bu merkez noktasını _root.kucuk._x olarak gösterebiliriz. Şayet bu noktadan film klibinin genişliğinin yarsını çıkartırsak resimin sol kenarını dolayısı ile farenin dolaşacağı sol sınırı buluruz. Bu değere genişliğin yarısını eklersek sağ sınırı buluruz. Üst sınır için _root.kucuk._y değerinden resimin yüksekliğinin yarsını çıkartmalı, alt sınır içinse eklemeliyiz. Böylece farenin dolaşaağı sınırları matematiksel olarak oluşturup bir değişken grubu şeklinde flash`a tanıtmış olduk.

5- Buyuk örnek adlı klibimizi seçelim. Şu komutları verelim:

onClipEvent (load) {
this._x=_root.maske._x;
this._y=_root.maske._y;
}

Küçük örnek adlı klibimizi seçelim ve:

onClipEvent (load) {
this._x=_root.buton._x;
this._y=_root.buton._y;
}

Bu komutlarla film klipleri her iki dairenin merkezine göre yerleşecekler ve sahnede bu eşitliği sağlamak için zahmete girmeye gerek kalmayacaktır. Biz klipleri sahnede karmaşık şekilde yerleştirsekte actionscript komutlarımızla film ilk yüklendiğinde heriki resimin merkez noktasını gösterir şekilde ayarlanacaktır.

6- Artık çalışmamızı kodlarla canlandırmaya başlayabiliriz. Buton klibini seçip şu komutları verin:

onClipEvent (mouseDown) {
//Sürükleme sınırları ayarlanıyor
startDrag(this,true,_root.sol,_root.ust,_root.sag,_root.alt)
down=1;
}
onClipEvent (mouseUp) {
down=0;
stopDrag();

}
onClipEvent (mouseMove) {
//Fare resim üzerinde olmak şartı ile farenin merkezden uzaklığı hesaplanıyor
if (_root.kucuk.hitTest(_root._xmouse,_root._ymouse)&&down==1) {
fark_x=_root.kucuk._x-_root._xmouse;
fark_y=_root.kucuk._y-_root._ymouse;
//Bu değerler 3 ile çarpılıp diğer resmin merkez noktası değiştiriliyor
_root.buyuk._x=_root.maske._x+(fark_x*3);
_root.buyuk._y=_root.maske._y+(fark_y*3);
}
}

mouseDown komutunda amacımız fare sol tuşuna bastığımızda sınuırlarını daha önce tesbit ettiğimiz küçük resim üzerinde farenin çemberi sürüklemesini sağlamaktır.Burada gördüğünüz true değeri verilmesinin amacı şudur: True değerlerde film klibi merkezden sürüklenir, flase değeri verirseniz film klibinin neresinden tutarsanız o kısmıdan filmi sürükleme şansımız olur. Tercihi animasyonunuzun özelliğine göre planlamalısınız.

down değişkeni oluşturmanın nedenini mouseMove komutunda göreceksiniz.

mouseUp komutu farenin sol tuşunun bırakılmasının algılanmasını sağlar.Böylece film klibinin sürüklenme özelliği kalkar.Down değişkenine 0 değeri verilir.

mouseMove komutu animasyonun çalışması için gerekli özellikleri verir.
if (_root.kucuk.hitTest(_root._xmouse,_root._ymouse)&&down==1) Burada önce bir şart ileri sürüyoruz.Şayet imlecin x ve y değerleri ile çember klibi çakışırsa ve down değişkeninin değeri 1 olursa alttaki işlemler yapılacaktır.Down değerinin 1 olması için farenin sol tuşuna basılı olmalıdır.Bunu nbiye yaptık?

mouseMove komutu farenin tüm hareketlerini algılayacaktır.Filmi açıp fareyi amaçsızca sahnede dolaştırdığınızı düşünelim.Bu durumda da alttaki kodlar devreye girecek ve maske klibinin altında devamlı değişen lüzumsuz görüntüler ortaya çıkacaktır.Down 1 olduğunda ise maskedeki görüntünün değişmesi için fare sol tuşuna basılı olmak ve küçük çemberi sürükleme şartı getirirlmiş ve animasyon işe yarar bir görüntüye kavuşmuştur.Dosyayı indirdikten sonra down==1 ifadesini if komutundan kaldırın, aradaki farkı göreceksiniz.

fark_x=_root.kucuk._x-_root._xmouse;Bu komutun amacı imlecin ucu ile küçük resimin merkez noktasındaki farkı bulmak içindir.Bunu daha sonra 3 kat büyük olan diğer resime uyarlayacağız.Değer 3 ile çarpıldığında görüntünün büyük resim ile izdüşüm noktası bulunacak ve bu nokta daha sonra maske klibi içine çağrılacaktır. Böylece aynı görüntünün büyütülmüş şekli maske içinde gözlenecektir.

Aynı işlemi _y değeri içinde yapıyoruz.

_root.buyuk._x=_root.maske._x+(fark_x*3);Şimdi büyük klibin merkez noktasını maske klibinin merkez noktasına alıyoruz.Bu değere az evvel anlattığımız farkı ekleyerek maske klibinin tam ortasında küçük resim üzerindeki çemberin bulunduğu alanın merkeze olan farkını 3 ile çarpıp ekliyoruz. Bu sayede aynı görüntünün büyütülmüş halini elde ediyoruz.

Aynı işlemi _y içinde yapıyoruz.Artık animasyonumuz tamamlanmıştır.