Rotasyon, nesnelerin belirli bir noktaya göre yatay eksenle yaptığı açısının değiştirilmesi durumudur. Rotasyonun referans aldığı noktayı manuel olarak değiştirip nesneyi belirli bir noktaya göre döndürebirilirz. Bunu kodlamalarla yapmak istediğimizde ise dönme noktasını direkt veya indirekt olarak değiştirme gibi birkaç yöntem bize yardımcı olacaktır. Mesela nesneyi bir klip içine koyup daha sonra dışardaki klibin rotasyonunu değiştirmek. Bu yolla içerdeki nesnenin x ve y koordinatlarını değiştirerek içteki klibin dönme noktasını değiştirmiş gibi oluruz. Başka bir yöntem olarak, nesnenin x ve y konumlarını trigonometrik olarak sinus ve kosinüs değişkenleri ile orantılandırıp yüzünü de (aradaki açının değerini rotasyona atayarak) merkez noktaya çevirirsek yine dönme noktasını değiştirebilme şansımız olur. Bunlardan başka mutlaka çok yöntem vardır ama benim son belirtmek istediğim yöntem MatrixTransformer sınıfını kullanarak yapılan dönme merkez noktası değişimidir. Bu yazıda bu son yöntemin üzerinde duracağız. Öncelikle yapacağımız uygulamaya bakalım;
Görüldüğü gibi nesne mouse tıklamasıyla değiştirilebilen bir odak noktaya göre dönüyor. Bunu yapabilmek için aşağıdaki, açıklamaları aynı satırda verilmiş olan kodları kullanıyoruz (objeler kodla oluşturuşuyor, dolayısıyla sadece kodları eklemeniz yetecek)
import fl.motion.MatrixTransformer;/*sınıfı çekiyoruz*/ var kare:Shape=new Shape();/*dönme noktası ile oynayacağımız dörtgeni çiziyoruz*/ kare.graphics.beginFill(0x79899F,1)/*dolgu rengi, alpha*/ kare.graphics.lineStyle(1, 0x58677C);/*çizgi kalınlığı, rengi*/ kare.graphics.drawRect(stage.stageWidth/2-30, stage.stageHeight/2-30, 60,60);/*sahnenin ortasına bir kare*/ kare.graphics.endFill();/*dolgu bitti*/ addChild(kare);/*sahneye eklendi*/ var odak:Shape=new Shape();/*odak noktasını belirteceğeimiz daireyi çiziyoruz*/ odak.graphics.beginFill(0xffffff,.3) odak.graphics.lineStyle(1, 0xC9C8BE); odak.graphics.drawCircle(0, 0, 3); odak.graphics.endFill(); odak.x=stage.stageWidth/2;odak.y=stage.stageHeight/2 addChild(odak); stage.addEventListener(Event.ENTER_FRAME, calis);/*enterframe fonksiyonunu atıyoruz*/ var m:Matrix = new Matrix();/*matrixTransformer'da kullanacağımız matrix'i tanımladık*/ function calis(e:Event){/*fonksiyonu yazıyoruz*/ MatrixTransformer.rotateAroundExternalPoint(m, odak.x, odak.y, 5);/*rotateAroundExternalPoint, klibi belirlenen noktalarla döndürmek için kullanılıyor. Kodda 5 değeri verdiğimiz kısım dönme açısıdır, her frame de mevcut rotasyona bu değer katılıyor. arttırırsak hızlı döner, negatif değer verirsek ters yöne döner.*/ kare.transform.matrix = m;/*karenin transform matrix'ini bizim matrixe eşitliyoruz*/ } stage.addEventListener(MouseEvent.MOUSE_DOWN,tik);/*odak koordinatlarını mouse tıklamasına göre ayarlıyoruz*/ function tik(e:MouseEvent) { odak.x=mouseX odak.y=mouseY }
Kodlar bu kadar, test edince çalışan uygulamayı görebilirsiniz. Bu yöntemleri çeşitli efekt animasyonlarında, eklem kinematiği simulasyonlarında ve daha bir çok rotasyona dayalı uygulamada kullanabilirsiniz.
—
Kaynak Dosya:
donme_noktasi.fla
Takip Edin (Fullusi):
Tüm Yazılar | Tüm Yazılar RSS | Twitter
——————————————————————————————-
cok teşekkürler paylaştığınız için. Sayenizde bir şey daha öğrendim “rotateAroundExternalPoint” flash 10 ile mi geldi bu özellik. Yoksa var mıydı?
Faydalı olduğuna sevindim. Bu daha önceki sürümde de vardı. fl motion paketi içinde MatrixTransformer sınıfı.
Fullusi çok temiz dersler yazıyorsun . Tebrikler
Alp, sitenin takipçilerinin arttığını görmek güzel. FlashÖdülleri 2010 başlıyor bunu da 2009 2.si olan sana bilgi olarak yazmak istedim.
Kolaylıklar
Ders çok faydalı eline sağlık.
Ufak bir soru sorayım;
Dinamik olark oluşturduğumuz movie cliplerin kayıt noktalarını’da bu şekilde değiştirebilir miyiz? Otomatik sol üst köşe oluyor ben orta kısmın olmasını istiyorum mesela.
Kolay gelsin..
Yazıyının faydalı olduğuna sevindim Engin. Aslında bu örnekte de kare dediğimiz nesne dinamik olarak oluşturuldu ama yazının başında da söylediğim gibi birçok ikincil yöntem var bu gibi dönme merkezlerini değiştirmek için. Temel olarak şöyle bir örnekle yeni oluşturduğumuz bir kareyi orta noktasından merkezlemeyi açıklayabiliriz:
İlk oluşturulan nesneler (0,0) noktasına (sol üst köşeye) göre indexlenir,
var kare:Shape=new Shape();kare.graphics.beginFill(0x79899F,1);
kare.graphics.lineStyle(1, 0x58677C);
kare.graphics.drawRect(stage.stageWidth/2, stage.stageHeight/2, 60,60);
kare.graphics.endFill();addChild(kare);
addEventListener(Event.ENTER_FRAME,calis)
function calis(e:Event){kare.rotation++}
Bu kodu test edersek karenin sahnenin ortasında (0,0) noktasına göre döndüğünü görürüz, çünkü biz kareyi direkt olarak sahnenin ortasında çizdik. Yapmamız gereken şey ise, karenin merkezini önce (0,0) noktasında çizip sonradan sahnenin ortasına taşımak, yani kod şu şekilde olmalı;
var kare:Shape=new Shape();kare.graphics.beginFill(0x79899F,1);
kare.graphics.lineStyle(1, 0x58677C);
kare.graphics.drawRect(-30, -30, 60,60);
kare.graphics.endFill();addChild(kare);
kare.x=stage.stageWidth/2;
kare.y=stage.stageHeight/2
addEventListener(Event.ENTER_FRAME,calis)
function calis(e:Event){kare.rotation+=5}
Bu şekilde bu probleme çözüm bulabiliriz.