Gün geçtikçe müşterilerin istekleri bizleri daha güzel ve karışık işler yapmaya zorluyor. Flash CS4 ile gelen 3D desteği daha kolay bir şekilde animasyonlar yapmamıza imkan veriyor. |
 |
|
Biraz geç oldu ama… Neredeyse CS5 çıkacak ama biz yinede Flash özelliklerinden hoşuma giden 3D özelliğini bu sayıda örnekli anlatmak istiyorum. Bildiğiniz yol en kısa yoldur Şu anda piyada çok fazla miktarda flash için örnek ve component var. Bazen kodlar çok karışık olabiliyor, yada component”ı satın almak istemiyorsunuz. çoğu zamanda yapmak istediğiniz animasyon bu hazır olarak çözümler içinde olmadığı kendiniz yapmak zorunda kalırsınız. Hemen flash”ın kendi özelliklerini kullanarak basit bir 3D animasyon nasıl yapılabileceğiniz inceleyelim. Gözünüzde büyütmeyin Yeni bir özellik çıktığı zaman insanlar “yeni bir özellik daha, öğrenecek binlerce şey daha” şeklinde yaklaşırlar konuya (en azından ben öyle yapıyorum). Ancak Flash”ın yaklaşımı konuya çok daha basit olmuş. Hepimizin yolu bir ara 3D programlara düşmüştür. Ekranda yaratığımız objeyi sağa sola çevirmişizdir. Flash”ta aynısını yapacağız. |
|
öncelikle sahneyi kağıt üstünde kurgulamız gerekiyorki daha sonradan karşımıza çıkan sorunlar fazla uğraşmayalım. Benim aklımdaki şu anda ekrana üzerine mouse gelince 3D animasyonla yakınlaşacak, mouse üzerinden çekilincede eski konumuna geri dönecek basit bir animasyon. Mouse”un üzerine gelince hareket kazanabilmesi için sizinde tahmin edebileceğiniz gibi bir movieclip”e ihtiyacımız olacak ve instance name”ı ile de bunu takip edeceğiz. öncelikle yeni bir flash dökümanı yaratalım. ( Resim 1) |
 |
|
Yarattığımız dökümanın özellikleriden 550×400 boyutlarında FPS 30 olarak belirliyoruz. ( Resim 2) |
 |
| Insert > New Symbol ( yada CTRL + F8 ) menüsünden, name özelliği “dugme” olan Type : “Movie Clip” olarak yeni bir movieclip yaratıyoruz. ( Resim 3) |
 |
|
Bu yaratığımız movieclip”i daha sonra içine 3D olacak objemizi yerleştirmek için kullanacağız. Tekrar, Insert > New Symbol ( yada CTRL + F8 ) menüsünden, name özelliği “kart” olan Type : “Movie Clip” olarak yeni bir movieclip yaratıyoruz. |
 |
| Bu “kart” isimli movieclip objesinin içine, düğme olarak kullanmayı düşündüğünüz tasarımı yerleştirelim. ( Resim 5) |
 |
| Tasarım işimiz bittikten sonra, daha önce “dugme” ismini vererek yaratığımız movieclip”i açalım. Bu movieclip içersine az önce yarattığımız “kart” isimli movieclip”ı sürüklerek bırakalım. (Resim 6) |
 |
| Animasyon süresinin 60 kareden oluşmasını düşünerekten 60ncı kareye gelerek F5 tuşuna basarak layer”ımızın 60ncı kareye kadar uzamasını sağlayalım. ( Resim 7) |
 |
| “dugme” isimli moviecip”in Timeline”ında sağ altta bulunan New Layer düğmesine tıklayarak yeni bir layer yaratalım. Bu yeni layer”ın üzeriden 30 ve 60″ıncı karelerde F6 tuşuna basarak yeni boş keyframe”lar yaratalım ve 1″nci keyframe”de dahil olmak üzere içlerine stop(); komutunu yazalım. (Resim 8) |
 |
|
3D özelliğini katabilmek için sağ menüden “3D rotation Tool (W)” düğmesine seçiyoruz. ( Resim 9) |
 |
|
Key Frame”lari yaratırken burada bir hile kullanacağız. Mouse düğmemizin üzerine gelince güzel bir animasyon ile büyüyerek ekranımıza gelecek, mouse üzerinden çekilincede eski bulunduğu noktaya geri dönecek. Bunu yapmanın en kolay yolu 1″nci ve 60″ıncı karelerin aynı keyframe dataların sahip olmasıdır. 30″ncu kare ise ekrana yaklaşan bir keyframe olacak. |
| 3D rotation tool (W) seçildiği zaman seçili olan objenin ortasında ( Resim 10) |
 |
|
gördüğünüz gibi bir kontrol işareti çıkar. Yeşil renk y eksenini, kırmızı renk x eksenini, mavi renkli çember ise z ekseninde hareket ettirmenizi sağlar. |
| Layer”ızın üzerine sağ tuşla tıklayarak en üstteki Create Motion Tween”ı seçelim ( Resim 11) . Layer”ımızın acık mavi renge dönecektir. |
 |
| Timeline”ımızı 30 nolu kareye getirerek ekrandaki x,y,z koordinat tool”unu kullanarak yeni bir açı verelim. ( Resim 12) |
 |
| Tools menüsündeki 3D Rotation Tool (W) üzerine sağ tuşla devamlı tıklarsanız 3D Traslation Tool (G) çıkacaktır. Şimdi bu düğmeyi seçelim. (Resim 13) |
 |
| Ekrana biraz daha farklı bir yönetim paneli çıkacaktır. Yeşil renk y eksenini, kırmızı renk x eksenini, orta noktaki siyah nokta ise z eksenini gösteriyor. Ben z eksenine tıklayarak objemi kendime doğru yaklaştırıyorum. (Resim 14) |
 |
|
Şimdi ise benim en çok beğendiğim ve After Effect”e benzeyen Motion Editör menüsünü kullanmaya geldi.Objemiz seçili iken Motion Editör menüsünü seçerseniz. |
| Karşınıza keyframe”leri yönetebileceğiniz bir pencere çıkacaktır. Bu pencerede Basic motion, Transformation, Color Effect, Filters, Eases özelliklerini değiştireceğiniz timeline çıkacaktır. (Resim 15) |
 |
| Bu penceredeki timeline kullanarak 60 nolu frame gidip kırmızı daire ile gösterdiğim noktadaki işarete tıklayarak orada yeni bir keyframe oluşturabilirsiniz. Rotation X,Y,Z ve Z koordinat sistemleriden değişiklik olduğu için o layer”lara birer key frame ekleyerek değerlerini 1″nci framedeki değer noktasına getirmeniz gerekecektir. (Resim 16) |
 |
| Ben kendi yaptığım örnekte filters”dan güzel gölge efektleride ekledim. |
| Animasyonumuzun daha akıcı olması için eases menüsünde + işaretine ( Resim 17) tıklayarak yeni bir tween yarattım. |
 |
|
Daha sonradan istediğiniz bir özelliği bu
ease özelliğini ekleyebilirsiniz (Resim 18). |
 |
| Stage”imize geri dönelim ve dugme isimli movieclip”i stage”imize sürükleyerek bırakalım ve instance name”ini btn olarak verelim. |
 |
 |
|
Actionscript”imiz için yeni bir layer yaratalım ve içersine
btn.addEventListener(MouseEvent.MOUSE_OVER, mOVER); btn.addEventListener(MouseEvent.MOUSE_OUT, mOUT); function mOVER(event:MouseEvent):void{ |