Flash CS3 Dersleri (Motion Tween)

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ş

Motion Tween


Hareket tweeni bir sembolün konum, boyut, rotasyon, renk ya da saydamlık gibi bir veya birkaç özelliğini interpole etmektir.

(interpole=iki konum ve iki boyutan yararlanarak aradaki bir konu mu saptama işlemidir).

Özetle bir hareket tweeninde iki frame arasındaki boş framelerin bu yöntemle Flash tarafından doldurulmasıdır.

Ara framelerin Flash tarafından nasıl doldurulduğunu toplu olarak görmenin en iyi yolu "onion skin" seçeneğini kullanmaktır.

14wzuyr.jpg


2meih3.jpg





Motion Tween Örnekleri-1

ej79l1.jpg


Uygulama

1- Araç kutusundan oval aracını seçin ve sahneye bir daire çizin.
Çizim seçili iken F8 e basın,açılan menüden grafik davranışını seçin.

2- Timeline`dan 15.frame`i işaretleyin ve F6`ya basın
(veya sağ klik insert keyframe veya menüden İnsert > Keyframe seçin)

3- Sahnede sembolün seçili olduğuna dikkat edin.
Mouse ile tutarak sahnede istediğiniz bir alana sürükleyin.
(Bunu klavyeden yön tuşları ile de yapabilirsiniz)
Bu işlem sırasında 15.frame`in seçili olma
sı gereklidir.

4- İlk frame`e geri dönün. Sağ klik yapıp Motion tweening seçeneğini işaretleyin.
Eğer hata yapmamışsanız aşağıdaki görüntü timeline üzerinde izlenmelidir.

15aobc.jpg


Ok çizgisi kesik kesikse hata yaptınız demektir.
En sık hata grafiğin sembol haline getirilmemesidir.

İpucu: Motion tween işleminde grafikler mutlaka sembole çevrilmelidir.
Shape tweende ise tersine sembol kullanılmaz.
Eğer elinizde bir sembol varsa "break apart"komutu (veya CTRL+B ) ile sembol özelliği kırılmalıdır.

5- Renk değişikliği için ilk 3 işlemi yapın.
15. frame seçili iken Properties panelinde Color menüsünü açın.
Buradan Tint`i seçin,istediğiniz renge ayarlayın.
Brightness renk koyuluğunun ayarını, alpha şeffaflık ayarını, advanced`ta bu işlemlerin kombine ayarını sağlar.
Cismin boyutunu küçültmek ve isteniyorsa döndürmek için araç kutusunda Free Transform aracına tıklayın ve en altına yerleştirilmiş olan "Rotate" ve "Scale" kullanın.

6- Rotasyon için Properties paneline dönün,

lzehe.jpg


Rotate kısmını saat yönü veya tersi olarak kullanabilirsiniz.

Times bölümü rotasyonun işlem boyunca kaç kez yapılacağını gösterir.

Easing bölümü tween işleminin hız ayarını yapar.

Varsayılan "0" durumunda her frame hızı aynıdır.

Artı değerlerde animasyon hızlı başlar,yavaş biter.

Eksi değerlerde yavaş başlar hızlı biter.

Bu akıcı bir animasyon için önemlidir.

Bir topun yere çarpıp yukarı doğru sekmesi animasyonunu hazırladığınızı düşünün.

Topun yukarıdan aşağıya doğru hareketi önce yavaş sonra giderek hızlanmalı, yere çarpıp sektiğinde önce hızlı sonra giderek yavaş olmalıdır.

Bunlar basit ama önemli noktalardır. Label bölümü frame etiketlenmesinde, Tweening bölümü tween şeklinin seçiminde kullanılır.

Diğerleri klavuz çizgi için kullanılan seçeneklerdir.

Bir sonraki örnekte anlatılacaktır.
 
Motion Tween Örnekleri

Motion Tween Örnekleri-2

1 - Çizgi ya da kalem aracı ile bir ok şekli çizin. F8 e basın ve davranışı grafik olarak atayın.

2 - Katmanların hemen altında bulunan " Add Motion Guide " butonuna
2ih1jr7.jpg
tıklayın.

1.layerın hemen üzerine bir klavuz katman eklenecektir.

Alttaki katman klavuzlanmış katman olacaktır.

Katmanların hemen sol tarafındaki işaretler bu ayırımı gösterecektir.

3 - Klavuz katman seçili iken sahneye kalem aracı ile bir çizgi çizin.

Bu çizgi sembolün hareket edeceği yoldur.

4 - 20.frame üzerine gelin sağ klik > Insert frame işaretleyin.

5 - Klavuzlanmış katmanında 20.frame üzerine gelin.
F6 ya basıp bir keyframe ekleyin.

6 - Snap tuşunun basılı olmasına dikkat edin. 1.frame`i işaretleyip ok sembolünü tutarak çizginin başına, 20. frame`i işaretleyip ok sembolünü çizginin sonuna yerleştirin.

7 - 1.frame üzerine sağ klik yapın ve create motion tweeni işaretleyin.
Hata yoksa timeline`da şu görüntü olmalıdır.

2naux5u.jpg


2 ayrı ok hareketi göreceksiniz.

535zf8.jpg


Şekilde gördüğünüz option bölümünde "orient to path" kutusunun işaretllenmiştir.

Bu tür uygulamalarda bu seçenek işaretli olmalıdır.
Fakat her tweende bu uygulama iyi sonuç vermez.
Synchronize seçeneği framelerle uyumunu, snap ise klavuz çizgiye kenetlenmeyi sağlar.

İpucu: Katmanların hemen sol tarafındaki işaretlerin üzerine çift tıklarsanız katman özellikleri kutusu açılır, buradan da katman özellikleri atanabilir.
 
Motion Tween Örnekleri

Motion Tween Örnekleri-3

x5p6e0.jpg


1 - Sahnede 5 adet şekil oluşturalım ve align komutu ile aynı hiza ve boyuta getirelim.

wu5qpy.jpg


2 - Tüm şekilleri seçtikten sonra menüden Modify > Group ( CTRL+G) ile gruplayalım.
Artık şekil blok halinde hareket edecektir.

3 - Sahnedeki gruplanmış şekil üzerine Sağ klik > Copy , sonra sahnede boş alana yeniden Sağ klik > Paste komutu ile şekli çoğaltalım.

4 - Bu ikinci grubu, birinci grup şekil hizasına getirelim ( Align komutu ile )

2d8jcyg.jpg


5 - Birbirinin devamı gibi gözüken bu iki grubun herikisini de seçelim.
(Shift tuşuna basılı olarak birden fazla seçim yapabilirsiniz ).

CTRL+G ile yeniden gruplandıralım.Artık elimizde tek bir grup var.

İpucu: İlk beşli grubu sahneye koyarken yukarıdaki şekildeki gibi sahnenin sol yanına yaslanmış olmalıdır.

Bu sayede kayma hareketi sırasında grafik sahnenin sol kenarından çıkıyormuş gibi gö zükür.

İkinci grubu birincinin yanına koyduğunuzda mutlaka sahnenin dışına taşmış olması gereklidir. (Şekili inceleyin)

Şayet taşma olmamışsa grafik sah ne dışına uzanana kadar 2, 3, 4 vs. kere çoğaltma ve hizalama yapmalısınız.

Taşma olmazsa yeterli kaymada olmaz.

6 - Şimdi 15.frame`i seçip F6 ya basarak bir keyframe ekleyin.

Grafiğin seçili olmasına dikkat edin.

Klavyeden sol yön tuşuna basarak grafiği sola doğru kaydırın.

Kaydırma 1.grubun tam olduğu yere 2.grup gelene kadar devam eder.

Tam yerine gelmezse kayma animasyonu sırasında kopukluk dik kati çeker. ( Yön tuşu ile kaydırma yapılırken Shift tuşuna basılı tutarsanız kayma 8 piksel olarak artar.)

v3q7ht.jpg


7 - Timeline `da 1.frame`i seçip Sağ klik > Create Motion Tween uygulayın.

8 - Bitmedi.
Şimdi 14.frame`i seçip F6 ya basarak bir keyframe ekleyin.

Tekrar 15.frame`i seçip sağ klik > Remove Frame komutu ile bu 15.frame`i silin.
Filminizi test edin.

9 - Şimdi 15. frame niçin silindi?

7.maddeden sonra filminizi test ettiğinizde kayma sırasında bir kopukluk göreceksiniz.
1.frame sırasında sahneye dikkat ederseniz en solda bir daire şekli göreceksiniz.
15.framede ne yaptık.
İkinci grubu birinci gurubun tam hizasına getirdik.
Solda yine bir daire mevcut.
(üstteki iki şekli dikkatle inceleyin )

Bu durumda daire iki framede de mevcut olacağından iki kez kaymada gözükecek bu da kopukluğa neden olacaktır.
15.frame`i silerek bir fazla daireyi yok ettik.
 
Motion Tween Örnekleri

Motion Tween Örnekleri-4

30azy1e.jpg


euq5xf.jpg


Bir çember etrafında dönen top animasyonunu inceleyeceğiz.

Uygulama:

1-Yöntem son derece kolaydır.

Mevcut katmanın üstüne bir klavuz katman ekleyin.

Oval aracını seçin. Color bölümünde Fill color alanını kapatın.

Sahneye bir elips çizin.

Sol kenarında küçük bir alanı silin.

Buraya top grafiği yerleştirilecektir.


2- Alttaki katmana geçin.

Gradient renkle dolu bir yuvarlak çizin ve F8 e basarak grafik davranışı verin.

Bu topu elipsin soldaki silinen alanda üst çizgi ucuna yerleştirin.

Bu sırada snap modifier`in açık olmasına dikkat edin.


3- 15.kareye keyframe ekleyin ve topu tutup çemberin en sağ tarafı üzerine yerleştirin.

30. kareyi seçin,bir keyframe ekleyin ve topu sol alttaki çizgi ucuna yerleştirin.


4-15 ve 30. kareye motion tween komutunu verin.

Bu karelerde properties panelinde snap kısmının açık olmasına özen gösterin.

Klavuz katmanda 30. kareye sağ klik yapıp, insert frame komutunu verin.

Yani her iki katmanda da frame sayısı eşit olmalıdır.


5- Filmi test edin
 
Motion Tween Örnekleri

Motion Tween Örnekleri-5

nmer7m.jpg


e5pocy.jpg


1- Menüden İnsert > New Symbol komutunu verin. Grafik davranışını seçin.

Bir yaprak şekli çizin.

261gutl.jpg


Aynı komutla yeni bir sembol açalım.

Davranışı yine grafik olarak verelim.

Yaprak sembolünü sahneye yerleştirelim.

Bu sembolün merkez noktasını yaprağın sap kısmına alacağız.

Bunun için araç kutusundan Free Transform aracını seçin.

Sahnedeki grafiyi seçtiğinizde ortada minik bir daire olur.

Mouse ile daire şeklindeki merkezi tutarak sap kısmına yerleştirin

m9pxko.jpg


Şimdi offsetlenmiş bu yapraktan bir grafik animasyonu oluşturacağız.

4.frame`i seçerek F6 ile bir keyframe ekleyin.

4.framede şekil seçili iken araç kutusunun en altında yerleştirilmiş olan Rotate tuşuna basın.

Yaprağı biraz yukarı doğru döndürün.

Dönme hareketi yeni merkez olan sap kısmını esas alacaktır.

10ogzuh.jpg


7.frame`e bir keyframe ekleyelim.

Yukarıdaki yöntemle yaprağı alta doğru döndürelim.

20ivyht.jpg


10.frame`e bir keyframe ekleyip yine aynı yöntemle yaprağı ilk konumuna çevirelim.

34fcnb6.jpg


1., 4. ve 7. framelere sağ klik > Create Motion Tween komutunu verin.

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

14kd6b9.jpg


Şimdi elimizde iki sembol var.

Birincisi hareketsiz yaprak sembolü ve ikincisi ise animasyonlu ve offsetlenmiş (hareket merkezi değiştirildi) bir yaprak.


2- Sahneye dönün. Hareketsiz yaprak sembolünü sahneye yerleştirin.

"Add Motion Guide" butonuna tıklayarak bir klavuz katman oluşturun.

Buraya kalem aracı ile yaprağın hareket edeceği klavuzu çizin.

3- Klavuzlanmış katman olan Layer1`i tıklayarak seçin. "Insert Layer" butonuna :

v7y2d3.jpg


basarak 1.katmanın hemen üzerine 2.katmanı yerleştirin.

4- Bu katmana da offsetli yaprağı yerleştirin.

Heriki grafiği klavuz çizginin başlangıç kısmına yerleştirin. (snap basılı olmalı)

5- Klavuz katmanın 13.frame üzerine gelin.

Insert Frame komutunu verin. 2. ve 1.katmanların da 13. frame üzerine keyframe ekleyin, grafikleri klavuz çizgi bitiş ucuna yerleştirin ve heriki katmana motion tween komutunu verin.

Hata yapmadıysanız timelineda şu görüntü olmalıdır:

2937ls6.jpg


6- 2.katmanın 1.frame üzerine gelin.

Daire şeklindeki işareti mouse ile tutarak 3.frame hizasına getirin.

Böylece offsetli yaprağın hareketi 3 frame sonra başlayacak.

1. katmanda da 13.frame üzerine gelin mouse ile keyframe`i tutarak 10. frame üzerine getirin.

Bu yöntemlede hareketsiz yaprak diğerinden daha önce duracaktır.

2ufdflh.jpg


F12 ye basarak filminizi test edin

 
Geri
Üst