Flash CS3 Dersleri (Shape Tweening)

WaTcHFuL

EVERYWHERE
Katılım
10 Kas 2005
Mesajlar
10,456
Reaction score
0
Puanları
0
Konum
Bizim Muhattap Olduğumuz Tek Gerçek Zihnimizde Yaş
Shape Tweening

Şekil tweeni; döndürme, ölçekleme , eğme gibi dönüşüm işlemlerini kullanarak elde edemediğimiz değişimleri interpole etme tekniğidir.
Bu tween işleminin birkaç özelliğinden bahsetmek gereklidir.

1- Şekil tweeni sembollere uygulanmaz.

Elimizde sembol varsa Break Apart(CTRL+B) komutu ile kırılmalıdır.

2- Şekil tweenlerinde klavuz katman kullanılmaz.

3- Bir katmanda birden fazla şekil tweeni uygulanabilir.

Fakat hareketleri sırasında çakışma gösterirlerse Flash tween işlemini karıştırabilir. Bu nedenle ayrı katman kullanmakta yarar vardır.

Ek katman dosya boyutunu arttırmayacağından uygun olan da budur.

Daire şeklinin bir kareye dönüştüğü animasyonu yaptığımızı varsayalım.

Bunun için önce 1.frame seçilip oval aracı ile (araç kutusundaki stroke color kısmını kapatıp) bir daire çizin.

Sonra 20.frame`e bir keyframe (F6) atayın.

Sahnedeki daireyi silin ve bir kare çizin.

1.frame üzerine tıklayıp,properties paneline dönün.

Burada tween kısmından tween şekli olarak shape`ı seçin.

Animasyon tamamdır.

Şayet daire ve kare şekillerini tam üst üste getirmezseniz animasyonunuz da kötü bir görünüm ortaya çıkacaktır.

Onion skin ve onion all seçenekleri ile tüm frameleri sahneye getirin.

Kayma varsa aşağıdaki gibi bir görünüm çıkar.

e6uo34.jpg


abicg9.jpg


Bu durumda kareyi mouse ile tutarak dairenin tam ortasına getirmek gereklidir.

Bunun için pratik başka bir yol daha vardır.

Her çizilen şekili önce seçin, sağ klik ile Cut komutunu verin.

Tekrar Sağ klik > Paste komutunu verdiğinizde flash bunu daima tam merkeze yapıştıracaktır.

Böylece "üst üste geldi mi" sorunu hallolmuş olur.

Şimdi properties panelinde shape tween uygulamasının parametrelerine bakalım.

Easing`den motion tweende bahsedilmişti.

Blend seçeneğindeki Angular parametresi dönüşüm sırasında keskin köşe ve düz kenarları korumak için kullanılır.

Daha yumuşak bir dönüşüm için ise Distributive parametresi seçilmelidir.

Flash bir şekil tweeninde en kısa ve kolay yol hangisi ise onu tercih eder.

Bu herzaman iyi sonuç vermez.

Flasha bu konuda yardımcı olmak için "Shape Hints" komutunu kullanmak gereklidir.

Shape Hints (Şekil İpuçları) nasıl kullanılır?

1- Yukarıda anlatılan yöntemle animasyonu oluşturun.

Animasyon tamamlanmadan şekil ipuçları aktifleşmez.

Timelineda şu görüntü oluşturulmuş olmalıdır:

dnixy0.jpg


2- Animasyon tamamsa birinci şekili seçip menüden Modify > Shape> Add Shape Hints (CTRL+Shift+H) komutunu verin.

Şeklinizin içinde kırmızı bir daire için de bir harf göreceksiniz.

2d75zxv.jpg


Bunu mouse ile tutarak değişmenin başlayacağı bir kenara yerleştirin.

Bu işlemi birkaç kez uygulayın.Snap modifier mutlaka açık olmalıdır.

3- Şimdi son frame`i seçin. Kırmızı daireyi ikinci şekildeki dönüşümün tamamlanmasını istediğiniz kenara getirin.

İşlemi uygun yapmışsanız renk hemen yeşile dönecektir.

İlk framedeki karşılığı ise sarıya döner.

2im19mp.jpg


Şekilde gördüğünüz gibi g ve h ipuçları dönüşümünü tamamlamıştır.

4- İyi bir animasyon için ipuçları sayısını arttırın.

Kurallar

1- İpuçları daima şeklin kenar ve köşelerine yerleştirilir.

Dolgu kısmındaki ipuçları gözardı edilir.

2- İpuçlarını saat yönünde veya ters yönde yerleştirirseniz flashın bunu anlaması daha kolay olur.

3- En fazla 26 ipucu kullanabilirsiniz.

4- Bir şekil ipucunu silmek için mouse ile tutarak sahne dışına sürükleyin.

5- Tüm şekil ipuçlarını silmek için Modify > Shape> Remote All Hints komutunu uygulayın.

6- Şekil ipucları yerleştirilmiş bir animasyonda tüm frameleri seçip kopyalayarak başka bir sahneye yerleştirdiğinizde ipuçlarının taşınamadığını göreceksiniz.

Bu nedenle ipuçlarını yeniden hazırlamanız gerekecektir.

7- Şekil ipuçları ile hazırladığınız bir animasyonun ipuçları olmadan nasıl çalıştığını görmeyi düşünüyorsanız: View > Show Shape Hints komutundaki işareti kaldırın.
 
Shape Tween Örnek

Shape Tween Örnek

Motion ve shape tweening işlemleri ile yapılan, bir topun düşme ve yükselme animasyonunu inceleyeceksiniz.

Animasyonda biri top diğeri gölge olmak üzere iki sembol kullanılmıştır.

Top hareketi motion, gölgenin topun yaklaşmasına bağ lı renk ve yerini değiştirme hareketi shape tweeningle sağlanmıştır.

Uygulama

1-Sahnede hiçbir işlem yapmadan kütüphanemizi açalım.

Sağ üstteki Option bölümünü açarak New symbol komutunu verelim.

Davranış olarak grafik bölümünü seçelim.

Sembol sahnesine dış kenar çizgisi olmayan bir daire çizelim.

Renk olarakta renk panelinin en altındaki gradient renklerden birini seçelim.

73kubn.jpg


2- Yeniden kütüphane Option bölümünden new symbol komutunu verelim.

Davranış şekli yine grafik olacaktır.

Swf dosyasında gördüğünüz gölgeye benzer bir şekli çizmek için oval aracını seçin.

Şekilde yine dış çizgi olmayacaktır.

28hlif6.jpg


Şekli seçin menüden Window> Design Panels > Color Mixer panelini açın.

zy9je0.jpg


3- Burada radial gradient`i seçin.

Renk konilerinden birini en sola diğerini en sağa mouse ile çekin.

Sağdaki koniyi tıklayın.

Aktif koninin üzeri siyah olacaktır.

Bu renk değişimine hazır demektir.

s4v3ag.jpg


Renk panelinden beyaz rengi seçin.

Solda ise açık bir gri rengi tercih edin.

4- Gölgeniz hazır. (Yukardaki işlemler sırasında gölge şekli seçili olmalıdır.)

5- Şimdi hala tamamen boş olan sahneye geri dönün.

Kütüphaneden top grafiğini sahneye yerleştirin.

6- CTRL+B komutu ile sembol özelliğini kırın.

10.frame`i seçin ve keyframe ekleyin.

Topu alt ok tuşları ile 5 cm. kadar aşağıya indirin.

Burası topun zemine çarptığı yer.

Bu etkiyi göstermek için Scala Modifier ile şekli hafifçe yassılaştırın.

fp9hyw.jpg


1.frame`e sağ klik yapın ve motion tween ekleyin.

7- 1.frame`i seçip properties panelinden easing değerini " -100 " e getirin.

Bu topun giderek hızlanarak yere yaklaşma sını sağlayacak.

346rejl.jpg


8- Mouse timeline üzerine getirin, 1.kareye tıklayın, sonra sol elinizle Shift tuşuna basarak 10.kareye tıklayın, tüm kareler seçilecek ve siyah bir renk alacaktır.

afja4p.jpg


9- Buraya sağ klik > Copy Frames komutunu verin.

11.frame üzerine gelip sağ klik ve Paste Frame komutunu verin.

Tüm frameler burada oluşacaktır.

9awyrm.jpg


10- Şimdi mouse ile 11.kareye tıklayın ve shift tuşuna basılı olarak son kareye tıklayın yine 11-20. kareler seçili olacaktır.

Buraya sağ klik > Reverse Frames komutu ile tüm frameleri tersine çevirin.

Top şimdi aşağıdan yukarı hare ket edecek ve easing değeri de " +100 " olacaktır.

11- Top animasyonunuz hazır, enter`a basarak hareketi görün.

12- Şimdi gölge animasyonuna gelelim.

Insert Layer butonuna basarak bir katman ekleyelim.

Bu katmanı mouse ile tutarak ilk katmanın altına alalım.

Gölge katmanı altta olmalıdır.

13- Gölge katmanının 1.frame`ini seçin ve kütüphaneden gölge animasyonunu topun zemine çarptığı yerin 10 piksel altına ( her alt yön tuşuna basmanız 1 piksel kayma sağlar ) yerleştirin.

(Neden tam altı değil. Top en üstte iken gölge biraz daha ileride gözükür, top yaklaştıkça gölgede topa doğru yaklaşır.)

14- CTRL+B komutu ile sembol özelliğini kırın.

10.frame`e bir keyframe ekleyin. Burası tam topun zemine çarptığı yerdir.

Bu nedenle gölgeyi 10 piksel yukarı alın.

126cup5.jpg


Color Mixer panelini açarak gölgenin rengini biraz koyulaştırın.

15- 1.frame`e shape tween komutunu verin.

1 den 10 a kadar frameleri yukarıdaki yöntemle seçin,kopyalayın ve 11.frame üzerine yapıtır komutunu verin.

Sonra yine Reverse Frames komutunu verin.

Timelineda şu görüntü olmalıdır:

30uxoa8.jpg


16- Filminizi test edin.
 
Geri
Üst