8. ANİMASYON

Animasyon mantığı görüntünün kare kare aktarılmasıyla oluşmaktadır. Filmlerde de film kamerası çok fazla resim çekerek görüntüye sırasıyla aktarmakta ve dolayısıyla hareket oluşmaktadır. Özellikle çizgi film yaratıcıları bir hareketli görüntüyü yaratmak için yüzlerce resmi birleştirmeleri gerekmektedir. Geleneksel animatörler oluşturulan bu yüzlerce resmi şeffaf bir kağıda çizerek üstüste koymakta ve birden fazla karede değişmeden kalan görüntü parçalarını defalarca çizmeyerek zaman kazanmaktadır [9].

Flash programıda farklı içerikleri farklı karelere yerleştirerek kare kare animasyonlar hazırlanmasını sağlamaktadır. Ama bütün kareleri teker teker oluşturmak yerine çoğu yerde Flash bize ara doldurmalar sayesinde kolaylık sağlamaktadır  [1].

8.1. Animasyon Ayarları

Animasyonlarda ayar işlemleri Timeline, Onion Skin, Movie Tween ve Shap Tween pencereleriyle sağlanmaktadır. Animasyonlarda gerçekleştirilmesi istenen olaylara göre yukarıda saydığımız çalışma pencereleri kullanılmaktadır.

8.1.1. Animasyon’da Timeline Kullanımı

Timeline araç çubuğu sayesinde istenilen framedeki görüntünün gösterilmesi ve boyutunu değiştirerek istenilen sayıda kare görmemiz sağlanmaktadır. Timeline üzerinde yapacağımız işlemleri sırayla açıklayalım.

Timeline alanının boyunu değiştirmek için;
File menüsünden New ile yeni döküman yaratılır.
Timeline’ın üst tarafındaki gri renkte çubuğun içine tıklanıt.
Mouse ile istenilen yere sürüklenir.
İstenilen yerde bırakılarak sol alt köşesindeki tutamaç ile istenilen büyüklüğe getirilir.

Timeline’daki kareleri farklı boyda görmek için;
Timeline’ın kare görünümü(Frame View) açılır menüsüne tıklayarak Timeline seçenekleri açılır.
Istenilen görünüm şekli seçilir
Farenin tuşu bırakılır.

8.1.2. Animasyon Karelerinin Yaratılması

Animasyonların temelini oluşturan karelerin yaratılması Timeline üzerindeki frameler kullanılarak yapılır.
Filmin sonuna boş bir anahtar kare eklemek için;
Yeni bir Flash dökümanı yaratılır.
Timeline üzerinden 5. Kareye tıklanır.
Insert (ekle) menüsünden Blank Keyframe seçilir.

Filmin ortasında boş bir anahtar kare yaratmak için;
10 kareli bir film yaratılır.
Timeline’dan 1. kare seçilir.
Sahne’ye bir nesne yerleştirilir.
Timeline’dan 5. kare seçilir.
Insert menüsünden Blank Keyframe seçilir. Böylece boş bir anahtar kare yaratılmış olur.

8.1.3. Kareler Üzerinde Düzenleme

Daha önceden kulandığımız kes, kopyala, yapıştır düzenlemeleri kareler için geçerli değildir. Bu iş için Flash’ın Edit menüsü kullanılarak özel komutlarla yapılır. Önce bu işlemlere geçmeden 1, 3, 5, 7, 9.karelerde anahtar kare olacak şekilde bir Film yaratalım.

Çok sayıda kareyi seçmek için;
Timeline’da imleç 2. kareye getirilir.
2. kareye tıklanır ve 4. kareye kadar sürükleyerek seçilir.

Bir tek kareyi kopyalayarak seçmek için;
Timeline’dan 3. kare seçilir.
Edit menüsünden Copy Frames seçilir yada Ctrl+Alt+C tuşlarına basılır.
Timeline’dan 4. kareye tıklayarak, kopyalanacak karenin yapıştırılacağı yer olarak seçilir.
Edit menüsünden Paste Frames seçilir.
Bir başka kopyayı 5.kareye yapıştırın. Flash 5 anahtar karesinin içeriğini 5 anahtar karesinin içeriği ile değiştirir.

Kareleri sürükleyerek taşımak için;
3’ten 8’e kadar kareler seçilir.
İmleç seçilen karelerin üzerine getirilir.
Seçilen karelerde herhangi bir yere basılı tutulur.
İstenilen alan seçildikten sonra ana frame’lerin üzerine taşınır.

Karelerin silinmesi için;
Silme işlemini gerçekleştiren iki komut vardır. Delete Frame ve Clear Keyframe. Delete Frame komutu bir frame’in kaldırılması için kullanılırken Clear Keyframe anahtar kare durumunu ortadan kaldırmak için kullanılır.

Bir filmden tek bir kareyi silmek için;
Çalışılan dosya ilk haldeyken Timeline’dan 4.kare seçilir.
Insert menüsünden Delete Frame seçilir yada klavyeden Ctrl+F5 tuşlarına basılır.
3.anahtar kare üzerinde de Delete Frame işlemi tekrarlanır.

Bir kare aralığını silmek için;
Timeline ile 3’ten 6’ya kadar ki Frame’ler seçilir.
Insert menüsünden Delete Frame seçilir. Flash seçilen tüm frame’leri silmiştir.
8.1.4. Animasyonun İzlenmesi

8.1.5. Animasyonda Anahtar Kareler

Bir topun sıçrayışını düşünelim. Bu topun havadaki hareketini yumuşatmak için iki hareket arasına daha fazla görüntü koymak gerekmektedir. Görüntü sayısını arttırdıkça hareketin yumuşaklığı artmaktadır. Şimdi ideal bir top zıplamasını gerçekleştirelim.
1.Frame’deyken bir daire çizilir
İkici ve üçüncü framelerde aynı daire aşağıya doğru çekilir
4.Frame’de top en altta olacak şekilde yapılır
Aynı işlemi yukarıya çıkması için tekrarlanır.
Yukarıdaki örnekte sadece iki anahtar frame’deki görüntüler verilmiştir. Bu anahtar alan sayısını arttıkça topun zıplayışında yumuşama olmaktadır.

8.2. Onion Skin’in Kullanımı

Sıçrayan bir toptaki herbir görüntüyü ayrı ayrı görmek zorundayız. Ama Onion Skin’i kullandığımız takdirde bulunulan Frame ve çevresindeki birkaç komşu Frame’deki görüntüleri görmemiz mümkün olmaktadır. Fakat bu görüntüler üzerinde değişiklik yapılamamaktadır. Onion Skin’i açmak için Timeline durum çubuğundan Onion Skin düğmesine tıklanır. Onion Skin’e dahil edilen kare sayısını ayarlamak için Timeline’da Modify Onion Markers düğmesine tıklanır. Buradaki Onion 2 seçeneği her iki yanda iki kare görmek için, Onion 5 seçeneği her iki yanda 5 kare görmek için, Onion All filmdeki tüm kareleri görmek için kullanılmaktadır  (Şekil 8.2.).

8.3. Kare Hızlarının Ayarlanması

Konunun başlangıcında da belirtildiği gibi animasyonlar görüntülerin birleştirilmesiyle oluşturulmaktadır. İnsan bu görüntülerin birleştirilmesiyle hareket oluştuğunu sanmaktadır. Ama ikna edebilmek için görüntülerin belirli bir hızda gelmesi gerekmektedir. Flash’ta da bu frame’lerin hızını ayarlamak mümkündür.

Kare gösterim hızını ayarlamak için;
Movie Properties iletişim kutusundan Frame Rate kısmına bir kare gösterim hızı girilir. Flash ilk olarak Default olarak 12 almaktadır. İstenilen değer girdikten sonra OK tuşuna basılır.

8.4. Motion Tween Hakkında

Oluşturulan animasyonların yoğun emek harcaması ve çok yer kaplaması olarak iki dezavantajı mevcuttur. Bu iki problem Tween (ara doldurma) işlemleri ile hafifletilmektedir. Nesneleri anahtar karelere yerleştirerek başlangıç, bitiş yerleri ve kaç karede eylemin oluşturulacağı verilerek animasyon kolay bir şekilde oluşturulur[8].

8.4.1. Motion Tween Kullanımı

Flash’ın farklarından bahsedilirken hareket desteğinden de söz edilmişti. Bu hareketleri tek tek Frame’lerde bulunan sembolleri Scale/ Rotate yaparak boyutu ve döndürme açısı ayarlanmaktadır. Ancak her frame’de bunu yapmak işi zorlaştırmaktadır. Motion Tween ile kolaylık sağlanmaktadır [6].

Motion Tween’in kullanımını kolaylaştıran Create Motion Tween seçeneği mevcuttur. Create Motion Tween kullanımı üzerinde duralım.

Komutu kullanmak için;
Yeni bir Flash dökümanı yaratılır.
Timeline’dan 1.kare seçilir.
Araç çubuğundan Oval aracı seçilir.
Çizgi rengi olarak None ayarlanır.
Sahnenin üst tarafına bir çember çizilir
1.kare seçiliyken Insert menüsünden Create Motion Tween seçilir.
Timeline’dan 5.kare seçilir.
Insert Frame seçilir.
5.karede topun sıçramasını sağlamak için top sahne’nin alt tarafına taşınır.
Timeline’dan 10.kare seçilir.
Insert Frame seçilir.
10.karede top yine sahnenin üst kısmına taşınır.
Control menüsünden Play yapılarak oluşturulan animasyon izlenir.

8.4.2. Motion Tween Ayarları

Motion Tween’in çalıştırılması için bir başlangıç karesi, bir bitiş karesi ve ara doldurma karelerine ihtiyaç vardır. Bir Motion Tween ayarı yapalım ve topu Motion Tween ile zıplatalım.

Frame Properties İletişim kutusundan tanımlamak için;
Yeni döküman yaratılır.
Sahne’nin üst kısmında olacak şekilde 1.karede bir top çizilir.
Top işaretlenir ve Modify menüsünden Group seçilir.
Timeline’dan 5.kare seçilir.Insert menüsünden Keyframe’e tıklanır.
10.kare seçilir ve Insert menüsünden Keyframe’e tıklanır.
5.kare seçilir ve top sahne’nin en altına sürüklenir.
1.kareye çift tıklanır.

Frame Properties iletişim kutusundan Tweening sekmesine tıklanır.

Tweening açılır menüsünden Motion seçilir ve OK’e tıklanır (Şekil 8.3.).
5. ve 10.kareler arası Motion Tween oluşturmak için 1. ve 5.karele için yapılan işlem tekrarlanır.
Görüldüğü gibi her frame’e top çizmek zorunda kalmadık. Ve elle yapılan zıplamadan çok daha profesyonelce olmaktadır. Hassasiyeti artırmak isteniliyorsa 5. ve 10. Frame’ler yerine ilerki frame’ler kullanılır. (20 ve 30 gibi..)

8.4.3. Motion Tween’e Yeni Kare Eklenmesi

Create Motion Tween sayesinde doldurma karelerinin herhangi birinde değişiklik yaparsanız Flash bu kareyi anahtar kare kabul eder. Bunun haricinde Insert  Keyframe ile anahtar kare ekleme imkanı vardır. Bu işlem için;

10 frame’lik Motion Tween ile sıçrayan top yapılır.
Timeline’dan 3.kare seçilir.
Araç çubuğundan Arrow seçilir.
Top geçerli konumundan farklı bir yere sürüklenir.
3.kare anahtar kare olarak değiştirilmiş olmaktadır.

8.4.4. Nesnelerin Canlandırılması

Nesnelerin ilerleyişindeki ara doldurma gibi büyüyüp küçülmelerinde de ara doldurma yapmak mümkündür. Bu işlem için;
Yeni bir Flash dökümanı oluşturulur.
Sahne üzerinde 1.karede bir nesne oluşturulur.
1.kare seçiliyken Insert Create Motion Tween seçilir.
Timeline2 dan 5.kare seçilir ve Insert Keyframe yapılır. 5.karedeyken nesne daha büyük bir boya ayarlanır.
1.kareye çift tıklanır.
Açılan Frame Properties iletişim kutusundan Tweeninig sekmesine geçilir.
Buradaki Motion Tween iletişim kutusundan Tween Scalling seçilerek OK’e tıklanır.
Bitiş anahtar karesi için 10.kare seçilir ve Insert Keyframe işlemi yapılır.
10.kare seçiliyken nesne daha küçük bir boya getirilir.
5.kareye çift tıklanarak ilk karede yapılan işlem tekrarlanır.

8.4.5. Nesnelerin Hareketi

Önceki alıştırmalarda sadece belli bir düzende zıplayan top oluşturmuştuk. Ama istendiği takdirde çılgınca hareket eden top yaratmak mümkündür. Bu işlem için;

Yeni bir flash dökümanı oluşturulur.
Sahne’den 1.kare üzerine bir top çizilir.
Top işaretlenir ve Modify menüsünden Group seçilir.
Timeline’da 20.kare üzerinde Insert-Frame işlemi yapılır.
Timeline’dan 1.kare seçilir ve Insert menüsünden Create Motion Tween seçilir.
Timeline’dan 5.kareye geçilir ve top farklı bir yere taşınır.
Timeline’dan 10,15 ve 20.kareler seçilerek her defasında topu yeri değiştirilir.
Oluşturulan top bilinçsiz bir şekilde sağa sola hareket etmektedir. (Tabi sizin oluşturduğunuz biçimde)
Oluşturulan bu animasyonda da sadece belli bir yol üzerinde hareket sözkonusudur. Kullanıcı isterse eğrilerle dolu bir çizgi ile topun çizgiyi takip etmesini sağlayabilir. Bir çizgiyi takip edebilmesi için;
20 kareli bir Motion Tween içeren döküman oluşturulur.
Ilk karedeyken sağ üst köşeye bir top çizilir.
Bir yol boyunca hareket edecek nesne seçilir.
Timeline’ın alt kısmından Add Guide Layer’a tıklanır. Flash bu işlem için bir hareket klavuzu yaratmaktadır.
Hareket klavuzu seçiliyken Pencil aracını kullanarak nesnenin hareket edeceği yol belirtilir.
1. ve sonuncu karelerde çemberlerin merkez noktaları çizgilerin başlangıç ve bitiş noktalarının üzerine getirilir.
Artık oluşturulan nesne çizgi üzerinde hareket etmektedir.

8.4.6. Motion Tween’in Hızının Değiştirilmesi

Oluşturulan animasyonda ara doldurmalar eşit miktarda dağılmıştır. Görüntülerin animasyon oluşturulmasında Tween hızı etkilidir. Belirtilen bu rakam çok düşük olduğunda sadece resim olarak gözükecek, çok yüksek olduğunda da animasyon tam anlaşılmadan bitmiş olacaktır. Bazen de animasyonun sonlarına doğru hızlanma ve yavaşlama olması istenecektir.

Animasyonun yavaş yavaş başlayarak hızlanmasını sağlamak için;
10 kareli bir Motion Tween oluşturulur.
Frame Properties iletişim kutusundan Tweening sekmesine geçilir.
Bir Ease In değeri girilir.
Ok’e tıklanır.

Animasyonun hızlı başlayıp yavaşlaması için;
Oluşturulan 10 karelik Motion Tween’in Frame Properties iletişim kutusuna geçilir.
Tweening sekmesinden Ease Out seçeneği seçilir.
1’den 100’e kadar bir değer girilerek OK’e tıklanır [8].

8.5. Shap Tween Hakkında

Oluşturulan nesnelerin yerlerini değiştirmek animasyonun oluşturulması için yeterli olmamaktadır. Nesnelerin şeklinin değiştirilmesi, renginin değiştirilmesi gibi özellikleride kullanmak gerekebilir. Bu durumda yardımımıza Shap Tween yetişmektedir. Shap Tween uygulamaları ile nesnelerimiz üzerinde her türlü değişikliği yapmak mümkündür. Motion Tween’in yapamadığı Shap Tween yapmakta fakat Motion Tween’in yaptığı döndürme, bir yol boyunca hareket işlemlerinide Shap Tween’de yapmak mümkün olmamaktadır.
Yalnız dikkat edilmesi gereken bir husus; Shape Tween yapılacak nesnenin Break Apart yapılması gerekliliğidir [6].

8.5.1. Shap Tween Kulllanımı

Shape Tween’i kullanarak topu sıçratmak mümkün olmaktadır. Fakat Shap Tween yapılan bu uygulamadaki  nesnenin şekli değişmiş olarak algılamaktadır. Frame Properties iletişim kutusundan Shap Tween tanımlaması yapalım ve bu tanımlama sonucunda ovali bir harfe çevirelim.

Bu işlem için;
Yeni bir Flash dökümanı yaratılır.
Timeline’dan 1.kare seçilir.
Araç çubuğundan Oval aracı seçilir.
Sahne’nin üst tarafında bir çember çizilir.
Timeline’dan 5.kare seçilir ve Insert Blank Keyframe seçilir.
5.kareye bir harf koyulur. Harf sembol mahiyetinde olduğu için Break Apart koyulur.
1.karedeyken çift tıklanır ve Frame Properties iletişim kutusundan Tweening sekmesine geçilir.
Tween açılır menüsünden Shape seçeneği seçilir ve Ok’e tıklanır (Şekil 8.4.).

Timeline’dan 1.kare seçilir.
Oluşturulan bu uygulama ile bir ovalin harfe dönüşmesi sağlanmış olur [1].

Motion Tween’de olduğu gibi bir başlangıç ve bitiş yerleri belirtilmek zorundadır. Aradaki doldurma işlemleride ilk karedekini son karedekine çevirecek şekilde olmaktadır. Bu aradaki doldurma işlemlerideki ayarları Motion Properties açılır menüsünden Shap işarelendikten sonra yapılır. Blend tip ile açısal yada dağıtılarak değiştirilmesi belirtilir, easing seçeneği ile de dönüşüm hızı belirtilir.
8.5.3. Basit Nesneler Üzerinde Shap Tween Uygulamaları

Oluşturulan basit nesnelerin daha karmaşık hale getirilmesiyle dönüştürülme işleminden beklelen sonucunun alınması güçleşir. Çünkü Flash nesneleri matematiksel olarak çevirmektedir. Fakat Shap Hint’leri kullanarak kendi yapacağımız ayarlar ile istenilen değişimin yapılması sağlanılabilir.

Basit nesnelerin karmaşık hale getirilmesine Shap Hint’leri kullanmak için;
1. Yeni bir Flash dosyası oluşturulur.
2. Sahne üzerinde 1.karede bir oval çizilir.
3. Timeline’dan 5.kare seçilir ve Insert Keyframe olarak tanımlanır.
4. 1.karede çift tıklanır ve Frame Properties iletişim kutusundan Tweeninig sekmesine geçilir.
5. Tweening penceresinden Shap seçilir ve Ok’e tıklanır.
6. Timeline’dan 5.kare seçilir.
7. Arrow aracı kullanılarak dört köşe nokta merkeze doğru çekilir ve çiçek şekli oluşur.
8. 10.karede çiçeğe bir sap eklenir.
9. 5.kareden 10.kare’ye kadar Shap Tween oluşturulur.
10. Shap Hint eklemek için 5.kare seçilir.
11. Modify menüsünden Transform-Add Shape Hint seçilir. Shap hint eklenmiş olur.
12. Arrow aracını kullanarak Shape Hint’i nesnenin kenarında problemli bir yere taşınır. Çok fazla özenmeye gerek yoktur. Çünkü üzerinde değişiklik yapmak mümkün olmaktadır.
13. Timeline’dan 10.kare seçilir. Zaten Shap Hint’ler ekli durumdadır. Bir önceki adımda seçilen sırada tutulur.
14. Arrow aracı kullanılarak her Shape Hint  yeni nesne üzerinde doğru konuma doğru sürüklenir.