Re: Adobe Flash Player Yerine Ne Kullanacağız
Kym Cavrak
Animasyonlu dnen ay rneği Bitmap nesneler ve bitmap grnt verileri (BitmapData nesneleri) ile alışma tekniklerini gsterir. Bu rnek dz ay yzeyi grntsn ham grnt verisi olarak kullanarak dnen kresel bir ay animasyonu oluşturur. Bu rnekte aşağıdaki teknikler gsterilmiştir:
Bu rneğin uygulama dosyalarını edinmek iin bkz. www.adobe.com/go/learn_programmingAS3samples_flash_tr . Animasyonlu dnen ay uygulama dosyaları Samples/SpinningMoon klasr iinde bulunabilir. Uygulama aşağıdaki dosyaları ierir:
Bu rneğin gerekleştirdiği ilk ana grev harici bir grnt dosyası olan ay yzeyi fotoğrafını yklemektir. Ykleme işlemi MoonSphere sınıfındaki iki yntem tarafından işlenir: ykleme işleminin başlatıldığı MoonSphere() yapıcısı ve harici grnt tamamen yklendiğinde ağrılan imageLoadComplete() yntemi.
Harici bir grnt yklemek harici bir SWF ğesi yklemek gibidir; her ikisi de ykleme işlemini gerekleştirmek iin flash.display.Loader sınıfının birer rneğini kullanır. MoonSphere() yntemindeki gerek kod, grnty aşağıdaki şekilde yklemeye başlar:
Her ne kadar harici bir grnt yklemeye başlama işlemin nemli bir kısmını oluştursa da, ykleme bittiğinde ne yapılacağını bilmek de aynı derecede nemlidir. Yukarıdaki kodda gsterildiği zere, grnt yklendiğinde imageLoadComplete() fonksiyonu ağrılır. Bu fonksiyon yklenen grnt verilerinde takip eden blmlerde anlatılan birok şeyi gerekleştirir. Ancak, grnt verilerini kullanması iin bu verilere erişmesi gerekir. Bir Loader nesnesi harici bir grnty ykleme iin kullanıldığında, yklenen grnt Loader nesnesine alt grntleme nesnesi olarak eklenen bir Bitmap rneği haline gelir. Bu durumda, Loader rneği olay dinleyici ynteminde ynteme bir parametre olarak iletilen olay nesnesinin bir parası olarak kullanılabilir. imageLoadComplete() ynteminin ilk satırları şu şekildedir:
Olay nesnesi parametresinin adının event olduğuna ve Event sınıfının bir rneği olduğuna dikkat edin. Event sınıfının her rneğinin olayı tetikleyen nesneye başvuran bir target zelliği vardır (bu durumda, daha nce de belirtildiği gibi, addEventListener() ynteminin ağrıldığı LoaderInfo rneği). LoaderInfo nesnesinin ise yklenen bitmap grnt ile Bitmap rneğini ieren (ykleme işlemi tamamlandığında) bir content zelliği vardır. Grnty doğrudan ekranda grntlemek isterseniz, bu Bitmap rneğini ( event.target.content ) bir grntleme nesnesi kabına ekleyebilirsiniz. (Loader nesnesini bir grntleme nesnesi kabına da ekleyebilirdiniz.) Ancak, bu rnekte, yklenen ierik ekranda grntlenmek yerine bir ham grnt kaynağı olarak kullanılmaktadır. Sonu olarak, imageLoadComplete() ynteminin ilk satırı yklenen Bitmap rneğinin ( event.target.content.bitmapData ) bitmapData zelliğini okur ve dnen ay animasyonunu oluşturmak iin grnt verilerinin bir kaynağı olarak kullanılan textureMap isimli rnek değişkeni iinde saklar. Sırada bu aıklanacak.
Animasyon temel anlamında bir grntnn belirli zaman aralıklarıyla değiştirilmesiyle oluşturulan hareket veya değişiklik yanılsamasını ifade eder. Bu rnekte ama dikey ekseni etrafında dnen bir ay yanılsaması oluşturmaktır. Ancak, animasyonun amaları doğrultusunda rneğin kresel deforme olma ynn yok sayabilirsiniz. Yklenen ve ay grnts verilerinin kaynağı olarak kullanılan gerek grnty ele alın:
Grdğnz zere, grnt bir veya birka kreden değil dikdrtgen bir ay yzeyi fotoğrafından oluşur. Fotoğraf tam olarak ayın ekvatorunda ekildiğinden, grntnn alt ve st kısımlarına yakın olan blmleri uzamış ve bozulmuştur. Grntdeki deformasyonu dzeltmek ve yuvarlak şekilde grnmesini sağlamak iin daha sonra anlatılacak bir yer değiştirme eşleme filtresi kullanacağız. Ancak, bu kaynak grntnn dikdrtgen şeklinde olmasından dolayı, krenin dndğ izlenimini yaratmak iin kodun ay yzeyi fotoğrafını yatay olarak kaydırması gerekir.
Grntnn aslında yan yana konulmuş iki ay yzeyi fotoğrafından oluştuğuna dikkat edin. Grnt, hareket grnmn oluşturmak iin srekli grnt verilerinin kopyalandığı kaynak grntdr. Grntnn iki kopyası yan yana konularak srekli, kesintisiz bir kaydırma efekti daha kolay elde edilebilir. Gelin bunun nasıl alıştığını grmek iin animasyon işlemini adım adım inceleyelim.
İşlem iki ayrı ActionScript nesnesi ierir. İlk olarak, kod iinde textureMap adlı BitmapData rneği ile temsil edilen yklenmiş kaynak grnt bulunur. Daha nceden anlatıldığı zere, textureMap harici grnt yklenir yklenmez şu kod kullanılarak grnt verileri ile doldurulur:
textureMap 'in ieriği dikdrtgen şeklindeki ay grntsdr. Buna ek olarak, dnş animasyonunu oluşturmak iin kod esasında ay grntsn ekranda gsteren gerek grntleme nesnesi olan sphere adlı bir Bitmap rneği kullanır. textureMap gibi sphere nesnesi de şu kod kullanılarak imageLoadComplete() ierisindeki ilk grnt verileri ile oluşturulmuş ve doldurulmuştur:
Kodun belirttiği zere sphere oluşturulmuştur. bitmapData zelliği ( sphere tarafından grntlenen ham grnt verileri) textureMap grntsyle aynı ykseklikte ve yarısı kadar genişlikte oluşturulmuştur. Başka bir deyişle, sphere ieriği ay fotoğrafının boyutunda olacaktır ( textureMap grnts yan yana iki ay fotoğrafı ierdiği iin). Ardından bitmapData zelliği copyPixels() yntemi kullanılarak grnt verileri ile doldurulmuştur. copyPixels() yntemi ağrısındaki parametreler birka şeyi gsterir:
Yeni bir Rectangle rneği olan ikinci parametre, anlık grntnn textureMap grntsnn hangi kısmından alınacağını belirtir; bu rnekte anlık grnt textureMap grntsnn sol st kşesinden başlayan bir dikdrtgendir (ilk iki Rectangle() parametresi ile gsterilir: 0, 0 ) ve dikdrtgen şeklindeki bu anlık grntnn genişliği ve yksekliği sphere ğesinin width ve height zellikleri ile aynıdır.
Grsel olarak temsil edilen kod aşağıdaki grntde anahatları verilen textureMap grntsnden pikselleri kopyalayıp sphere ğesi zerine yapıştırır. Başka bir deyişle, sphere ğesinin BitmapData ieriği burada vurgulanan textureMap grntsnn bir blmdr.
Kaynak grnt yklendikten ve sphere oluşturulduktan sonra imageLoadComplete() yntemi tarafından gerekleştirilen son grev animasyon ayarlarını yapmaktır. Animasyon şu kod ile oluşturulan ve başlatılan rotationTimer adlı bir Timer rneği tarafından alıştırılır.
Kod ilk olarak rotationTimer adlı Timer rneğini oluşturur; Timer() yapıcısına iletilen parametre rotationTimer ğesinin timer ğesini her 15 milisaniyede bir tetiklemesi gerektiğini belirtir. Ardından timer olayı ( TimerEvent.TIMER ) oluştuğunda rotateMoon() ynteminin ağrılacağını belirten addEventListener() yntemi ağrılır. Son olarak start() yntemi ağrılarak zamanlayıcı gerek anlamda başlatılır.
rotationTimer ğesinin tanımlanma şeklinden dolayı Flash Player yaklaşık her 15 milisaniyede bir ay animasyonunun gerekleştiği MoonSphere sınıfı iindeki rotateMoon() yntemini ağırır. rotateMoon() ynteminin kaynak kodu şu şekildedir:
Greceğiniz zere, sourceX , sphere zerine kopyalanacak piksellerin textureMap ierisindeki konumunu belirlemek iin kullanılır, bu nedenle bu kod dikdrtgeni textureMap zerinde bir piksel sağa taşıma efektine sahiptir. Grsel aıklamaya geri dnecek olursak, birka animasyon dngsnden sonra kaynak dikdrtgen şu şekilde birka piksel sağa kaymış olacaktır:
Piksellerin kopyalandığı konumun yavaşa ve aynı doğrultuda değişmesi animasyonun temelini oluşturur. Kaynak konumu yavaşa ve srekli olarak sağa kaydırıldığında ekrandaki sphere ğesi iinde grntlenen grnt srekli olarak sola kayıyormuş gibi grnr. İşte bu nedenle kaynak grntde ( textureMap ) ay yzeyi fotoğrafından iki tane olması gerekir. Dikdrtgen srekli olarak sağa taşındığından genelde tek bir ay fotoğrafı zerinde değil aynı anda iki ay fotoğrafı zerindedir.
Kaynak dikdrtgenin yavaşa sağa doğru hareket etmesi konusunda bir sorun vardır. Dikdrtgen sonunda textureMap grntsnn sağ kenarına ulaşacak ve sphere ğesine kopyalanacak ay fotoğrafı pikseli kalmayacaktır:
Kod sourceX ğesinin (dikdrtgenin sol kenarı) textureMap grntsnn ortasına gelip gelmediğini denetler. Geldiğinde sourceX değerini sıfırlayarak textureMap grntsnn sol kenarına geri gtrr ve dngy baştan başlatır:
Uygun sourceX değerinin hesaplanmasının ardından animasyon oluşturmanın son adımı yeni kaynak dikdrtgen piksellerini sphere ğesi zerine kopyalamaktır. Bu işlemi gerekleştiren kod sphere ğesini başlangıta dolduran koda ok benzer (nceki blmlerde anlatılan); aralarındaki tek fark new Rectangle() yapıcı ağrısında dikdrtgenin sol kenarının sourceX konumunda olmasıdır:
Bu kodun her 15 milisaniyede bir ağrıldığını unutmayın. Kaynak dikdrtgenin konumu ve sphere ğesi zerine kopyalanan pikseller srekli olarak değiştiğinden ekranda sphere ğesinde grntlenen fotoğraf grnts srekli olarak kayar. Başka bir deyişle, ay srekli dnyormuş gibi grnr.
Bildiğiniz gibi ay bir dikdrtgen değil bir kredir. Bu nedenle, rneğin srekli hareket eden dikdrtgen ay yzeyi fotoğrafını alıp onu bir kreye evirmesi gerekir. Bu işlem iki adımda gerekleştirilir: ay yzeyi fotoğrafının dairesel bir alanı haricindeki tm ieriği gizlemek iin bir maske kullanılır ve ay fotoğrafını boyutlu grnecek şekilde deforme etmek iin bir yer değiştirme eşleme filtresi kullanılır.
ncelikle, MoonSphere nesnesinin filtrenin oluşturduğu kre haricindeki ieriğinin tmn gizlemek iin daire şeklinde bir maske kullanılır. Aşağıdaki kod maskeyi bir Shape rneği olarak oluşturur ve MoonSphere rneğinin maskesi olarak uygular:
Daire şeklinde bir maske kullanarak fotoğrafın bazı kısımlarını gizlemek gereki bir dnen kre efekti oluşturmak iin yeterli değildir. Ay yzeyi fotoğrafının ekilme biiminden dolayı boyutları orantılı değildir; grntnn st veya alt kısmına yakın olan kısımları ekvator kısmına gre daha fazla deforme olmuş ve uzamıştır. Ay fotoğrafının boyutlu grnmesini sağlamak amacıyla grnmn deforme etmek iin bir yer değiştirme eşleme filtresi kullanacağız.
d3342ee215