codesignist tarafından gönderilen mesaj:
Yukarıdaki yazıların tamamını okumadım hızlıca gözgezdirdim ve anladığım kadarıyla cevap şöyle;
300x200 boyutlarında resimi göstereceğimiz alanımız olsun ve buraya yüklediğimiz bu boyutlardan daha büyük olan bir resmimiz olsun.
Öncelikle yapmak istediğimiz şeyi, aynı ilkokulda problem çözer gibi çözmek bize büyük avantaj sağlacaktır. Yani öncelikle verilenleri yazıyoruz;
Verilenler:
Yüklediğimiz büyük resmin genişliği ve yüksekliği
Resmi göstereceğimiz alanın genişliğ ve yüksekliği
Çözüm:
Bu değelerle bir oran bulup bunları mouse'un x ve y değerine bağlamalıyız. Böylelikle mouse'a göre hareketi sağlamış olacağız. Önce x pozisyonundaki hareketi inceliyelim:
_x de hareket ederken resmin kaydığı pozisyonun maksimum değeri; resmimizin genişliği ve alanımızın genişliği arasında kalan kısımdır.
var ba_gen:Number=800;//Büyük alan genişliği(Resim genişliği)
var ka_gen:Number=300;//Küçük alan genişliği
var kk_gen:Number=ba_gen-ka_gen;//Kalan genişlik
Oranı ise şöyle bulacağız. Her bir _xmouse hareketinde, resmimiz x pozisyonunda ne kadar hareket etmeli?
Yani kalan genişlik, resmi göstereceğimiz genişliğin kaç katı?
var oranx:Number=kk_gen/ka_gen;
Aynısını y pozisyonu için yapalım ve oranlarımız mouse pozisyonları ile çarpalım,tabi sınırlarıda ekliyelim;
Kod:
var ka_gen:Number = 300;
//Küçük alan genişliği
var ka_yuk:Number = 200;
//Küçük alan yüksekliği
var ba_gen:Number = 800;
//Büyük alan(Resim) genişliği
var ba_yuk:Number = 420;
//Büyük alan(Resim) yüksekliği
var kk_gen:Number = ba_gen-ka_gen;
//Kalan alan genişliği
var kk_yuk:Number = ba_yuk-ka_yuk;
//Kalan alan yüksekliği
var oranx:Number = kk_gen/ka_gen;
var orany:Number = kk_yuk/ka_yuk;
onEnterFrame = function () {
b_mc._x = -_xmouse*oranx;
b_mc._y = -_ymouse*oranx;
//Resmin sınırları
if (b_mc._x>0) {
b_mc._x = 0;
} else if (b_mc._x<-kk_gen) {
b_mc._x = -kk_gen;
}
if (b_mc._y>0) {
b_mc._y = 0;
} else if (b_mc._y<-kk_yuk) {
b_mc._y = -kk_yuk;
}
}
Mouse pozisyonlarını eksi ile çarptık çünkü resmimiz mouse pozisyonlarının tersine göre hareket ediyor.
Tabi burada resim alanı tam köşede. Araya biraz pay eklersek kodlar biraz daha değişiyor;
Kod:
var ka_gen:Number = 300;
//Küçük alan genişliği
var ka_yuk:Number = 200;
//Küçük alan yüksekliği
var ba_gen:Number = 800;
//Büyük alan(Resim) genişliği
var ba_yuk:Number = 420;
//Büyük alan(Resim) yüksekliği
var kk_gen:Number = ba_gen-ka_gen;
//Kalan alan genişliği
var kk_yuk:Number = ba_yuk-ka_yuk;
//Kalan alan yüksekliği
var pay_x:Number=30;
var pay_y:Number=20;
var oranx:Number = kk_gen/ka_gen;
var orany:Number = kk_yuk/ka_yuk;
onEnterFrame = function () {
b_mc._x = -(_xmouse-pay_x)*oranx+pay_x;
b_mc._y = -(_ymouse-pay_y)*orany+pay_y;
if (b_mc._x>pay_x) {
b_mc._x = pay_x;
} else if (b_mc._x<pay_x-kk_gen) {
b_mc._x = pay_x-kk_gen;
}
if (b_mc._y>pay_y) {
b_mc._y = pay_y;
} else if (b_mc._y<pay_y-kk_yuk) {
b_mc._y = pay_y-kk_yuk;
}
};
Kodlara biraz daha eklenti yapıp ease (yumuşak geçiş) eklersek daha güzel olur;
Kod:
var ka_gen:Number = 300;
//Küçük alan genişliği
var ka_yuk:Number = 200;
//Küçük alan yüksekliği
var ba_gen:Number = 800;
//Büyük alan(Resim) genişliği
var ba_yuk:Number = 420;
//Büyük alan(Resim) yüksekliği
var kk_gen:Number = ba_gen-ka_gen;
//Kalan alan genişliği
var kk_yuk:Number = ba_yuk-ka_yuk;
//Kalan alan yüksekliği
var pay_x:Number=30;
var pay_y:Number=20;
var oranx:Number = kk_gen/ka_gen;
var orany:Number = kk_yuk/ka_yuk;
var ease_x:Number=0;
var ease_y:Number=0;
var ease_deger:Number=.2;//%20 lik esneme
onEnterFrame = function () {
ease_x = -(_xmouse-pay_x)*oranx+pay_x;
ease_y = -(_ymouse-pay_y)*orany+pay_y;
b_mc._x +=(ease_x-b_mc._x)*ease_deger;
b_mc._y +=(ease_y-b_mc._y)*ease_deger;
if (b_mc._x>pay_x) {
b_mc._x = pay_x;
} else if (b_mc._x<pay_x-kk_gen) {
b_mc._x = pay_x-kk_gen;
}
if (b_mc._y>pay_y) {
b_mc._y = pay_y;
} else if (b_mc._y<pay_y-kk_yuk) {
b_mc._y = pay_y-kk_yuk;
}
};