Ürünlere Flash Tabanlı Zoom Yapma Mantığı
Yazar : E.Altuğ YILMAZ
Merhaba arkadaşlar ;
Geçtiğimiz haftalarda kurumsal bir eğitimimde özellikle ürünlerinin ayrıntısına kadar zoom yapabilme ve her ürün için ayrı ayrı değil hepsini klasörden çekmesi klasördeki dosyalar güncellenince de tüm galerinin güncellenmesi üzerine birşeyler yapmıştık. Bana örnek olarak yapmak istedikleri uygulamayı 15 Pound'a alabileceklerini ama bu uygulamanın klasör desteklemediğinden almadıklarını söylemişlerdi. İşte o site :
http://www.magictoolbox.com/magicmagnify
Arkadaşlar bende actionscripti ilk öğrenmeye başladığımda klasik setmaskla yapılan böyle tek tek açılan kareli daireli maskelere birkaç dolar ücret verdiğimi hatırlarım flashdenden kodunu açınca bumuydu diye kalmışlığım da baya vardır.Aslında algositmayı anlamaya çalışıp yazmak çok daha basit.Balığı hazır almak yerine tutmayı öğrenmek gibi. Neyse bu zoom uygulaması için 4 layera ihtiyacımız var.Ürünün önce gözükecek küçük halinin tutan layer,arkada maskelenecek büyük halini tutan layer,maskemizi tutan layer ve scriptlerimizi yazacağımız layer.Mümkün olduğunda kodları buton ve movieklip üzerine yazmayın AS 3.0 içinde iyi bir alışkanlık olur zorlanmazsınız.
Layer sırası tabiiki önemli. Benim yazdığım kodlardan ilki setmask ile maskeyi buyuk_mc instance name verdiğim büyük fotoya maske_mc adını verdiğim maskeyi uygulamak. Niye setmask değilde hocam layera sağ tıklayıp desek diyenmi oldu? :) Eğer sağ tıklayıp verirsek statik olacak ve ilk halinde kalacak ama ben birazdan startdrag ile maskeyi runtime değiştirmem gerekecek ve runtime yani karşı makinede dinamik olarak değişebilen maskelerimizi setMask ile verebiliyoruz. Devamında sahne yuklendiğinde onEnterFrame oldukça bir fonksiyonu çalıştıracak,fonksiyonda startDrag ile maskeyi mouse'a ilişiklendiriyor,devamında da arkaplanda dikkat edeceksiniz mouse'un x ve y koordinatları ile ters oranda arkadaki buyuk_mc'nin kayması lazım ona uygun (benim çalışmamın büyüklüğünde 500 yeterli geldi sizde farklı olabilir) matematiksel olarak zıtlık için sabit bir değerden o anki koordinatı çıkartıp arkada kayma işlemini yapıyoruz.trace(_root._xmouse) diyerek rakamların orjinallerini mouse gezdikçe kontrol edebilirsiniz.
_______________________________________________________________
buyuk_mc.setMask(maske_mc);
_root.onEnterFrame = function()
{
maske_mc.startDrag("buyuk_mc");
_root.buyuk_mc._x = 500-(_root._xmouse)
_root.buyuk_mc._y = 500-(_root._ymouse)
};
_______________________________________________________________
Örnek uygulamam için :
http://www.expression.web.tr/al2y/zoom.html
Çalışmayı indirmek için :
http://www.expression.web.tr/al2y/trexta_zoom.fla
Tabii bu uygulamayı blog için hazırladım,eksikleri var.Eğitimde görseli dışardan alacak şekilde ve prelodinglerini (özellikle arkadaki fotoğraf için) yazdık.Sizde o kısımları üstüne devam edebilir veya loader ve progress bar componentından faydalanabilirsiniz. Böylece klasördeki fotoğraf güncellendikçe galerimizde güncellenecektir.
Faydalı olması dileğiyle...