Temel Bilgisayar Teknolojileri Kullanımı

B. ANİMASYON

Bu bölümde animasyon konusundaki web standardı olarak kabul edilen Adobe Flash programını inceleyeceğiz. Flash Programına ait program arayüzü aşağıdaki gibidir:


Flash program arayüzü, versiyonlar arasında değişiklik göstermekle birlikte panellerin ve araçların kullanımında önemli farklar yoktur.

1. Araç Çubukları ve Görevleri

Selection Tool: Nesnenin tamamını seçmeye yarayan araç düğmesidir.

Subselection Tool: Alt seçim aracıdır. Noktasal seçim aracıdır. Noktasal olarak seçim yapar. Şeklin çizgi yolu üzerinde seçim işlemleri gerçekleştirilebilir.

Free Transform Tool: Nesneyi serbest döndürme ve boyutlandırma işlemlerini yapabilmek için kullandığımız araç çubuğudur.

Gradiant Transform Tool: Şeklin iç dolgusu ile ilgili işlemler gerçekleştirmek amacıyla kullanılan araç çubuğudur.

Line Tool: Çizgi oluşturmak amacıyla kullanılan araç düğmesidir.

Lasso Tool: Paçalı seçim yapmak amacıyla kullanılan araç çubuğudur.

Pen Tool: Noktalar arası birleştirerek şekil oluşturulması amacıyla kullanılan araç düğmesidir.

Text Tool: Metin alanı oluşturmak amacıyla kullanılan araç düğmesidir. Statik, input ve dinamik veri alanları oluşturulabilir.

Oval Tool: Daire çizimlerini yapmak amacıyla kullanılan araç çubuğudur.

Rectangle Tool: Dikdörtgen oluşturmak amacıyla kullanılan araç çubuğudur.

Pencil Tool: Kalem aracıdır. Düz, yumuşak ve mürekkep yazım biçimleri bulunmaktadır. Bu düzenlemeler araç çubuğunun altında yer alan options bölümünden yapılabilmektedir.

Brush Tool: Fırçalı boyama işlemlerinin gerçekleştirilmesi amacıyla kullanılan araç çubuğudur.

Ink Bootle Tool: Oluşturduğumuz şeklin dış kenar çizgisinerenk vermek amacıyla kullanılır.

Paint Bucket Tool: Şeklin iç dolgu renginin doldurulmasını sağlar.

Eyedropper Tool: Herhangi bir nesneye ait rengin başk bir nesneye aktarılması amacıyla kullanılır.

Eareser Tool: Silme işlemlerinin gerçekleştirilmesi amacıyla kullanılır.

NOT: Fırça ve silgi araçları seçildikten sonra araç çubuğunun alt bölümünde silme ve fırça yönteminin nasıl işlem yapacağına dair seçim ekranı görüntülenir.

Bu seçim özelliği ile silgi ve fırça aracı normal, iç alan üzerinde etkili, çizgi üzerinde etkili ,seçim alnında etkili olarak kullanılabilmektedir.

2. Timeline (Zaman Çizelgesi İşlemleri)

Animasyonun zaman içerisinde yapacağı işlemlerin tanımlandığı karelerdir. Zaman çizelgesinin sağ tarafında filmin oluştuğu layer (katman) bölümü yer almaktadır.Her katmana hareketlilik sağlanan ayrı bir nesnenin yerleşimi ve komutların ayrı bir katmanda bulunması işlemleri kolaylaştıracaktır.

Layer katmanın alt bölümünde yeni bir katman ekleme, katmanların gruplandırılması için klasör ekleme ve katman silme işlemlerinin gerçekleştirildiği düğmeler yer almaktadır. Katman grubunun üzerinde, katmanların görüntülenmesi ile ilgili işlemleri gerçekleştiren 3’lü düğme grubu yer almaktadır.

Göz resmi: Katmanın görüntülenmesini veya gizlenmesini sağlar.

Kilit Resmi: İşlem yaparken yanlışlıkla zarar vermek istemediğimiz katmanları korumamızı sağlar.

Dış Hat Düğmesi: Katmanda yer alan şekillerin sadece dış çizgilerinin görüntülenmesi amacıyla kullanıla araç düğmesidir.

3. Scene (Sahne) İşlemleri

Flash programını çalıştırdığımız zaman karşımıza gelen beyaz geniş boş alan çalışma sahnemizdir. Tüm tasarımlar bu sahne üzerinde gerçekleştirilmektedir.

Size: Çalışma ekranın genişliğinin ayarlanması amacıyla kullanılan düğmedir.

Background: Çalışma belgesinin arka plan renginin düzenlenmesini sağlar.

Frame Rate: Birim saniyede çalıştırılacak kare sayısının ayarlanmasını sağlayan seçenektir.

4. Tweening (Kare Doldurma) İşlemleri

2 farklı kare doldurma işlemi vardır. Bunlar shape (şekil) ve motion (hareket) kare doldurma işlemleridir. Şekil kare doldurma işlemleri şeklin bir nesneden başka bir nesneye dönüşüm işlemlerinin yapılması amacıyla kullanılır. Hareket kare doldurma işlemi ise şeklin bir konumdan başka bir konuma hareketi, boyutunun değişimi ve renginin değişimi gibi işlemleri gerçekleştirmek amacıyla kullanılır.

Daha önce Flash programlarında animasyonların karelerdeki görüntülerden oluştuğunu söylemiştik. Örneğin bir kelebeğin kanadını çırpmasını animasyonla ifade edeceksek her bir hareketi ayrı ayrı karelere yerleştirmemiz gerekecektir.

Peki her zaman animasyonları böyle kare kare hazırlamamız gerekecekse o zaman Flash’ın bize sağlayacağı avantaj nedir? Tabii ki bütün bir animasyonu bu şekilde kare kare çizerek hazırlamak zorunda olsaydık Flash’ın bize sağlayacağı bir avantaj olmayacaktı. Ama Flash programını hazırlayan mühendisler bunu önceden düşünerek Flash içerisinde Motion Tween ve Shape Tween adında 2 adet animasyon çeşidi yerleştirmişler. Bu 2 tween işleminde de temel mantık şudur. Kullanıcı animasyonun başlangıç ve bitiş hareketini tanımlar, bu iki nokta arasındaki hareketi Flash programı kendisi tamamlar.

4.1 Motion Tween

Bu Tween çeşidinde renk değişimi, boyut değişimi ve konum değişimi gerçekleştirilebilir. Örneğin herhangi bir kare veya dikdörtgeni aşağıdaki gibi bir A konumundan B konumuna getirirken renginin solmasını veya başka bir renge dönüşmesini sağlayabiliriz.

Şimdi Flash programında basit bir Motion Tween animasyonu gerçekleştirelim.

Şekilde görüldüğü gibi boş bir Flash çalışması açtım ve daire çizim aracını seçerek bir adet daire çizdim. Yani şu anda birinci Frame de bir adet dairem mevcut. Eğer bu 1 numaralı frame’i seçtikten sonra alt bölümde yer alan Properties penceresini açarsak burada Tween seçeneğinin yanında None seçeneğinin seçili olduğunu görürüz.
Şu anda bu Frame’im herhangi bir Tween işlemine hazır değildir. Ben Motion Tween işlemi gerçekleştirmek istediğim için bu frame in Tween özelliğini Motion olarak belirlemem gerekir. O halde yandaki pencerede Tween seçeneğini Motion olarak belirliyorum.

Ayrıca hemen hatırlatalım. Eğer Motion Tween uygulaması yapmak istiyorsak çizimimizin bir Sembol veya Movie Clip olması gerekmektedir. Aksi halde Motion Tween uygulamasını gerçekleştiremeyiz. O halde bu çizmiş olduğumuz çemberi seçerek klavyeden F8 tuşuna basıyoruz. Bu tuşa bastığımızda karşımıza Convert to Sembol iletişim penceresi gelecektir.

Burada Movie Clip veya Graphic seçeneklerinden birini seçmek suretiyle çizimimizi sembole dönüştürebiliriz. Biz Graphic seçeneğini kullanarak çizimimizi Graphic olarak tanımlıyoruz. Daha sonra 10. Frame’e gelerek klavyeden F6 (Insert Key Frame) tuşuna basıyoruz.

Şekilde görüldüğü gibi 10. Frame üzerinde klavyenin F6 tuşuna basıldığında 10. Frame’e bir adet anahtar kare yerleştiriliyor ve kadar olan bütün Frame’ler içerisine 1. Framedeki görüntü kopyalanıyor. Frameler üzerindeki ok kesintisiz olduğundan Motion Tween uygulamasını doğru bir şekilde gerçekleştirdiğime emin olabilirim. Şu anda bu çalışmamı çalıştırırsam herhangi bir değişiklik olmayacaktır. Çünkü benim başlangıç (1) ve bitiş (10) framelerimdeki görüntü aynı. O halde ben bitiş Framelerimdeki görüntüyü biraz değiştirerek animasyonu sağlamalıyım.

Ben 10. Frameimi seçiyorum ve bu frame seçili iken çemberimin bulunduğu pozisyonu değiştiriyorum. Ayrıca rengini veya büyüklüğünü de değiştirebilirim.

Çember seçili iken alt tarafta yer alan Properties panelinde yer alan Color seçeneğini kullanarak çemberimin rengini de değiştiriyorum.





Görüldüğü gibi 10. Frame’i seçtim klavyeden F6 tuşuna bastım. Böylece Flash benim için 10. Frame’e bir KeyFrame ekledi ve 1. Frame’den 10. Frame’e kadar kopyaladı. 10.Frame’i seçtikten sonra bu frame’de yer alan görüntümün yerini, boyutunu ve rengini değiştiriyorum. Böylece Flash programına animasyonun bitiminde sembolümün ne durumda olmasını istediğimi belirtiyorum. Flash programı da 1. Frame deki görüntünün 10. yani son framedeki görüntüye dönüşebilmesi için gerekli değişiklikleri aradaki framelere yansıtıyor. Yani bizi ilgilendiren 1. Frame ve 10. Frame. Aradaki animasyonu Flash kendisi gerçekleştiriyor.
Şimdi klavyeden Ctrl+Enter tuşlarına basarak veya Control menüsünden Test Movie seçeneğini işaretleyerek animasyonunuzu test edebilirsiniz.
Motion Tween Animasyonlarda Klavuz Katman Kullanımı:

Motion Tween animasyonları özelliği, animasyonun yalnızca başlangıç ve bitiş karelerini tasarlamamızdır. Flash programı geri kalan hareketi kendisi tamamlayacaktır. Flash programı bu işlemi gerçekleştirirken iki nokta arasını doğrusal bir yol ile belirlemektedir.

Eğer biz farklı bir yol belirlemek suretiyle Flash programının bu yolu takip etmesini istiyorsak o zaman bir klavuz katman kullanmalıyız.

Şekil 2 ‘de görüldüğü gibi farklı bir yol belirlemek istiyorsak bir adet Klavuz Layer kullanmamız gerekir.

Şimdi böyle bir uygulamayı hazırlamaya çalışalım.

Önce boş bir Flash dosyası açalım ve bir adet daire çizelim. Bu dairemi çizmiş olduğum Layer’ın ismini daire olarak değiştiriyorum.

Şimdi Insert-Layer menüsünü kullanarak bir adet katman daha ekliyoruz. Bu katman da bizim klavuz katmanımız olacak. Bu katmanın da özelliklerini açarak ismini klavuz, tipini de Guide olarak belirliyoruz. Hareketimiz sırasında kullanmak istediğimiz klavuz yolumuzu bu katmanda hazırlayacağız. Nesnemizin de bu katmandaki çizimi klavuz olarak görmesini sağlamak amacıyla bu katmanın özelliğini Guide olarak belirledik.

Şimdi klavuz katmanımıza hareket sırasında kullanılacak yolu çizmemiz gerekiyor. Bu işlem için Pen aracını kullanabilirsiniz.






Şimdi klavuz katmanımızın hareket boyunca görüntülenmesini sağlamak amacıyla 20 kareye giderek bir adet KeyFrame ekliyoruz. Bu işlemi gerçekleştirmek üzere 20. Frame’e giderek F6 tuşuna basmaktır.

Şimdi dairemizin yer aldığı layerda 1.Frame’de sağ tıklayarak Create Motion Tween seçeneğini seçiyoruz.

Şimdi daire isimli Layer’ımızda 20. Frame’e bir adet anahtar kare (Key Frame) ekliyoruz. Bunun için 20. Frame’i seçerek F6 tuşuna basmanız yeterli olacaktır.


A

B

20. Frame’e bir adet anahtar kare ekledikten sonra dairemizi A noktasından B noktasına doğru klavuzu takip ettirmek suretiyle taşıyoruz.

CTRL+Enter tuş kombinasyonunu kullanarak animasyonunuzu test edebilirsiniz.

4.2 Shape Tween

Flash programında gördüğümüz ikinci tip animasyonlar da Shape Tween animasyonlardır. Motion Tween animasyonlarda nesnelerin konumları, boyutları ve renkleri değiştirilebilmekteyken Shape Tween animasyonlarda bir nesne başka bir nesneye dönüştürülebilmektedir.

Shape Tween animasyonları kullanılarak bir yazıyı başka bir yazıya veya bir daireyi dikdörtgene dönüştürebilirsiniz.

Motion Tween animasyonlarda harekete katılan çizimlerin Convert to Symbol iletişim penceresi kullanılarak (veya klavyeden F8 tuşuna basılarak) Nesneye (Graphic,Movie Clip veya butona) dönüştürülmesi gerekirken Shape Tween animasyonlarda Salt çizim (yani nesne olmaması) gerekmektedir.

Şimdi basit bir Shape Tween animasyon hazırlayalım.

Önce boş bir Flash çalışması açalım ve Oval (daire) çizim aracını kullanarak bir adet daire çizelim.

Bu daireyi çizmiş olduğumuz 1 nolu Fame seçili iken alt bölümde yer alan Properties penceresini açarak Tween özelliğini Shape olarak belirleyelim.

Şimdi 25. Frame’i seçerek klavyeden F6 tuşuna basıyoruz. (F6 tuşuna bastığımızda bir adet anahtar kare eklenecektir.) Anahtar kareler

Motion ve Shape Tween animasyonlarda kullanılan özel animasyon karelerdir.

Biz dönüşüm işlemi yapmak istiyoruz. Fakat şu anda 1 nolu Frame ile 25 nolu Frame’de aynı görüntü mevcut. Bu yüzden tam bir dönüşüm işlemi gerçekleşmeyecektir. Biz son Framedeki daireyi silerek yerine bir adet dikdörtgen çizelim. Böylece 1. Frame’deki daire 25. Frame’e kadar dikdörtgene dönüşecektir.

Şimdi başka bir Shape Tween örneği yapalım. Yine boş bir belge açalım ve büyük font kullanarak I harfi yapalım.

Yandaki şekilde görüldüğü gibi boş bir Flash dosyası açtık ve metin aracını kullanarak Arial Narrow fontunu kullanarak bir adet büyük I harfi yazdık. Bu harfi Shape Tween yöntemi ile T harfine dönüştürmek istiyoruz. Bu işlemin 20 Frame içerisinde gerçekleşmesini istiyoruz. Bu yüzden 20 nolu Frame üzerinde farenin sağtuşuna basarak açılan menüden Insert Blank Key Frame seçeneğini seçelim

Daha önceki örneğimizde Insert Keyframe seçeneğini seçmiştik. Insert Keyframe seçeneğini eklediğimiz yere kadar ilk frame’in kopyasını atıyordu. Insert Blank Keyframe seçeneği ise boş bir anahtar kare ekler.Bizim örneğimizde 20 nolu framee bir adet blank keyframe ekledik. Böylece ilk 19 frame 1.frame’in aynen kopyası olarak eklendi. Fakat 20 nolu Frame boş olarak hazırlandı. Biz bu 20 nolu Frame’e T harfini yazalım

Şimdi 20 nolu Frame’imize de T harfini yazdık. Fakat daha önce Shape Tween animasyonlarda animasyona giren çizimlerin Salt çizim olması gerektiğini söylemiştik. Burada ise bizim harflerimiz henüz çizime dönüştürülmedi. Halen yazı durumundalar. Bu yazılarımızı çizime dönüştürmek için Modify-Break Apart seçeneği kullanılmadır. Önce 20 nolu frame’de yer alan son nesnem olan T harfini seçerek bu komutu uyguluyorum. Daha sonra da 1 nolu frame’de yer alan I harfini seçerek bu komutu uyguluyorum. Böylece bu harfleri birer çizime dönüştürmüş oluyorum.

Şu anda Framelerimize dikkat edersek halen gri renkli görünüyorlar.

Biz bu framelerin özelliğini henüz Shape Tween’e uygun hale getirmedik. Bu işlemi gerçekleştirmek için bu frame’leri seçiyoruz ve aşağıda yer alan properties penceresinden Tween özelliğini Shape olarak ayarlıyoruz.

Eğer yapmış olduğumuz animasyonu çalıştırırsak şekildeki gibi bir görünümle karşılacağız. I harfimizin ortasında T harfinin üst kısmı oluşturulacaktır. Eğer biz Shape Tween işleminin gidiş yönünü değiştirmek ve kendimize göre bir dönüşüm ayarlamak istersek o zaman Shape Hints leri kullanmalıyız. Böyle bir şeye ihtiyacımız olduğu durumlarla karşılaşabiliriz.

Örneğin yukarıdaki şekildeki gibi bir Shape Tween işlemimizin olduğunu varsayalım. Burada 1. şekilde görülen çizgi 2. şekilde görülen daireye dönüştürülmektedir. Eğer bu dönüşüm sırasında 1. şekildeki A noktasının 2. şekildeki A noktasına, 1 şekildeki B noktasının 2. şekildeki B noktasına gelmesini istiyorsak o zaman Flash programında yer alan shape Hintslerden faydalanmalıyız.

Şimdi kendi örneğimize geri dönelim. 1 nolu frame’e gelerek buraya 2 adet Shape Hint ekleyelim. Bunu yapabilmek için Modify menüsünden Shape ve oradan da Add Shape Hints seçeneğini kullanıyoruz. Bu komutu bir defa verirsenin sadece a isimli shape hint’i ekleyecektir. Bu işlemi tekrarlamaya devam ederseniz b,c… şeklinde isimlendirmeye devam edecektir. Şimdi 1. Frame’de yer alan I harfine 2 adet Shape Hint eklemiş olduk. Tabiî ki biz buraya 2 adet shape hint ekledikten sonra 20 nolu frame’e de aynı shape Hintler eklenmiş olacaktır. Bunların yerlerini ayarlamak suretiyle dönüşüme istediğimiz şekilde müdahale edebilmekteyiz.